Angular2：如何将子内容传递给指令？_编程开发

Angular2：如何将子内容传递给指令？

创始人

2024-10-22 09:01:12

0次

在Angular 2中，可以通过使用@Input装饰器将子内容传递给指令。

首先，创建一个指令：

import { Directive, Input, ElementRef } from '@angular/core';

@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  constructor(private el: ElementRef) { }

  @Input('myDirective') myContent: string;

  ngOnInit() {
    this.el.nativeElement.innerHTML = this.myContent;
  }
}

然后，在使用该指令的组件中，将子内容传递给指令：

在上面的示例中，我们将子内容"Child content"传递给了名为myDirective的指令。

请注意，@Input装饰器用于定义一个输入属性，它接收来自父组件的值。在这个例子中，我们将myDirective作为指令的输入属性，并将子内容传递给它。

最后，指令的ngOnInit生命周期钩子中，我们将传递的子内容设置为指令所在元素的innerHTML。

这样，子内容就会被传递给指令，并渲染到指令所在的元素中。

上一篇：Angular2：放弃文本输入更改后更新视图。

下一篇：Angular2：通过Injector.create(...)创建的动态创建的注入器是否会被销毁？

Angular2：如何将子内容传递给指令？

相关内容

热门资讯