Question

给出以下模板：

<p title>Hello World</p>

我如何用指令中的另一个字符串替换Hello World？

我尝试了以下但不起作用：

@Directive({
  selector: '[title]'
})
export class TitleDirective{
  constructor(el: ElementRef, renderer: Renderer, private viewContainer: ViewContainerRef) {
    renderer.setText(el.nativeElement, 'Hello another world');
  }
}

我只能找到改变样式，属性或听取改变事件的例子，这些例子无济于事。

Answer 1

如果您只想更改<p>标签内的文本，则应在控制器内创建一个局部变量并绑定到该变量。

.TS

private title = 'Hello World';

html的

<p>{{ title }}</p>

现在您可以更改控制器功能中的title变量，例如：

changeTitle(title: string) {
    this.title = title;
}

并致电this.changeTitle('Hello another World');

Answer 2

回答我的问题：

您必须使用您的指令实现OnInit并传入给定节点，因为您必须等待由angular2设置的属性（https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html）：

@Directive({
  selector: '[title]'
})
export class TitleDirective implements OnInit{
  constructor(private el: ElementRef, private renderer: Renderer) {

  }

  ngOnInit(): void {
    this.renderer.setText(this.el.nativeElement.childNodes[0], 'Hello another world');
  }
}

覆盖指令中的标记值

2 个答案: