, wie man Zugang Element innerhalb AngularJS Komponente $ postLink

Question

dieses Repo für Winkel vorformulierten mit https://github.com/AngularClass/NG6-starter

Aber ich fand schwer, den dom innen Winkel component ‚s $postLink Phase zuzugreifen.

Codiere ich es falsch? Oder muss ich eine Direktive verwenden, die nicht optimal für eine einseitige Bindung ist?

about.component.js

import template from './about.html'; 
import controller from './about.controller'; 
import './about.scss'; 

let aboutComponent = { 
    restrict: 'E', 
    bindings: {}, 
    template, 
    controller, 
}; 

export default aboutComponent; 

about.controller.js

class AboutController { 
    constructor() { 
    this.name = 'about'; 
    this.$postLink = ($element) => { 
     console.log($element); // here is when I want to utilize the element! 
    } 
    } 
} 

export default AboutController; 

about.js

import angular from 'angular'; 
import uiRouter from 'angular-ui-router'; 
import aboutComponent from './about.component'; 

let aboutModule = angular.module('about', [ 
    uiRouter 
]) 

.config(($stateProvider) => { 
    "ngInject"; 
    $stateProvider 
    .state('about', { 
     url: '/about', 
     component: 'about' 
    }); 
}) 

.component('about', aboutComponent) 
.name; 

export default aboutModule; 

about.html

<section> 
    <navbar></navbar> 
    <h1>{{ $ctrl.name }}</h1> 
    <section> 
    About us. 
    </section> 
</section> 

Answer 1

Sie können $element (Direktivenelement) nicht von $postLink Lifecycle Hook abrufen. Sie müssen $element in den Controller constructor injizieren, um die Direktive element in die Direktive zu bekommen.

class AboutController { 
    static $inject = ["$element"] 

    constructor($element) { 
    this.name = 'about'; 
    this.$element = $element; 
    } 
    // better move out $postLink outside controller. 
    $postLink =() => { 
    console.log($element); 
    } 
} 

Export Standard AboutController;