在嵌套组件中嵌套 Angular 组件答案

【问题标题】：Nesting Angular component inside nested component在嵌套组件中嵌套 Angular 组件
【发布时间】：2017-12-31 05:17:17
【问题描述】：

伙计们！

我的问题是我将组件嵌套在另一个组件中，该组件是路由的组件。它是这样的：（带有router-outlet 的主组件）AppComponent -> LeaderComponent -> NavigationPathComponent。在最后一个组件中，我使用@Input() 从父级检索一些值，它在组件代码中有效，但在模板中无效。

这是我的代码：
NavigationPathComponent:

import { Component, Input } from "@angular/core";
@Component({
    selector: "navigation-path",
    template: "{{los}}",
    style: "irrelevant"]
})

export class NavigationPathComponent {
    @Input() los: string;
}

在 LeaderComponent 模板里面有：

<navigation-path los="someString"></navigation-path>

这会导致如果我将{{los}} 添加到<navigation-path> 模板中，它应该在浏览器中输出someString，但它什么也不输出。虽然如果我在组件代码中将其注销，它会将someString 输出到控制台。

附：如果我将<navigation-path> 移动到 AppComponent 模板（嵌套级别更高）中，它会完美运行。甚至可以将组件嵌套在 Angular 中已经嵌套的组件中吗？目前我正在开发 Angular v4.2.4。

【问题讨论】：

标签： angular nested components

【解决方案1】：

传递属性时，您需要在属性周围使用 [] 语法：这将是 [los]="someString"。

【讨论】：

那为什么它在组件代码中可见，但在模板中不可见？附言不幸的是，你的建议没有奏效。 :(
代码对我来说看起来不错。我一直使用带有 html 页面的 templateUrl。尝试在使用 ngOnInit 初始化 NavigationPathComponent 时在控制台记录“los”。
问题是它有一个价值。它将 someString 记录到控制台（或警报取决于我决定如何显示它。