在角度 5 中使用组件（HTML）中的指令数据

Question

I am using directive named blue where I have a variable named count . I want to use this count variable in the HTML. How can I do this? I want something just like below......

<div blue >
{{count}}
</div>

Answer 1

This question is a bit difficult to answer, as there is a lot of Angular knowledge necessary.

But still, to give you some help, there is a good book on Angular from the publisher Springer. It's called Pro Angular - Second Edition and the writer is Adam Freeman. It goes into a lot of detail and also explains everything on directives.

I a try to give you anwer to your question here, I believe yours might look like this:

<div class="blue">
    {{count}}
</div>

You can either fill the count variable within the Angular template or from the Angular model. The model in Angular is typically done using TypeScript. Somewhere within that may be a public variable called count or a method called getCount() returning a string.

Check out the mentioned book, as it explains it all.

Answer 2

In Angular 5, you probably are looking for a component where you can define properties.

<blue>{{count}}</blue>

https://angular.io/guide/quickstart#first-component , step 4, title in component AppComponent .

Directive is normally used to decorate the behavior, https://angular.io/api/core/Directive . Normally I don't think count belongs to blue directive

<div blue>{{count}}</div>

Answer 3

To do this, you might need Output events. Just add @Output() count = new EventEmitter<number>(); in your directive and use it like this:

component.html

<div blue (count)="changeCount($event)">
  {{count}}
</div>

component.ts

count: number;
changeCount(event: number) {
  this.count = event;
}

Answer 4

You need to revisit the logic of directive. for detail this link will help you in detail https://angular.io/guide/attribute-directives

Answer 5

You could use output events as LordAlpaca mentioned, or you could pass in an instance of your parent component and have the attribute directive set the count value on your parent component:

Template:

<h1 [blue]="appComponent">
     {{count}}
</h1>

AppComponent

export class AppComponent {
    count : number;
    appComponent = this;
}

Directive

export class BlueDirective implements OnInit{
  count : number = 4;
  @Input("blue") component : any;

  ngOnInit(){
    this.component.count = this.count;
  }
}

Answer 6

You can achieve this using template var. In your directive:

@Directive({
    selector: '[appBlue]',
    exportAs: 'blueDirective'
})
export class BlueDirective {
    public count: number;
    // your logic here...
}

Implementation looks like this:

<div appBlue #blue="blueDirective">
    {{ blue.count }}
</div>

I hope it can help