Question

如何使用角度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。

的“模板语法”部分查找

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

1 个答案: