Angular 4: 如何动态绑定子组件的输入属性

Question

如何在 angular 4 中使用一种方式动态设置我的子组件的输入属性？

例如我有以下子组件：

@Component({
    selector: 'app-page-header',
    templateUrl: './page-header.component.html',
    styleUrls: ['./page-header.component.scss']
})
export class PageHeaderComponent {
    @Input() heading: string;
}

如果我在我的组件中按如下方式使用此子组件，它会起作用：

<app-page-header [heading]="'Hello world'"></app-page-header>

但我想像这样动态设置我的子组件的标题属性

<app-page-header [heading]="{{myfield}}"></app-page-header>

甚至使用管道

<app-page-header [heading]="{{ 'MY_TEXT_FIELD' | translate:lang }}"></app-page-header>

但是不行。

我怎样才能做到这一点以及语法如何？预先感谢您的回答。

Answer 1

只需删除 {{}}.

所以应该是：

<app-page-header [heading]="myfield"></app-page-header>

和

<app-page-header [heading]="'MY_TEXT_FIELD' | translate:lang"></app-page-header>

您可以在 Angular.io Cheatsheet 的 'Template syntax' 部分中查找。

Angular 4: 如何动态绑定子组件的输入属性

Angular 4: how can I bind dynamically input attribute of subcomponent

data-binding

angular2-template

angular