Question

如何从组件选择器中获取文本内容？

举个例子：

<div class="page-wrapper">
    <app-page-title>List applications</app-page-title>

    <router-outlet></router-outlet>
</div>

我有app-page-title组件，但我不明白，我如何在组件中获取此节点的值（＆＃34;列出应用程序＆＃34;）。

UPD：

<app-card>
  <app-card-title>Some My Title</app-card-title>
  <app-card-content>Some My Content</app-card-content>
  <app-card-footer>Some My Footer</app-card-footer>
</app-card>

如何从app-card组件中获取内部节点？

Answer 1

最简单的方法是在组件中设置标题，然后将其插入到视图中。例如。

<div class="page-wrapper">
    <app-page-title>{{myPageTitle}}</app-page-title>

    <router-outlet></router-outlet>
</div>

然后在您的组件打字稿中，它将类似于：

@Component({...})
export class pageTitleComponent {
  ...
  myPageTitle = 'List applications'
}

Answer 2

是否可以像这样重写它：

<div class="page-wrapper">
    <app-page-title text="List applications"></app-page-title>

    <router-outlet></router-outlet>
</div>

如果是这样，那么您可以使用输入装饰器在app-page-title（子）组件中定义输入属性。然后子组件具有该属性中的值。

@Input() text: string;

Angular 5：从组件选择器获取节点的值

2 个答案: