在嵌套组件中嵌套 Angular 组件

Posted 2023-02-22

【中文标题】在嵌套组件中嵌套 Angular 组件

【英文标题】：Nesting Angular component inside nested component

【发布时间】：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。

【参考方案1】：

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

【讨论】：

那为什么它在组件代码中可见，但在模板中不可见？附言不幸的是，你的建议没有奏效。 :(

代码对我来说看起来不错。我一直使用带有 html 页面的 templateUrl。尝试在使用 ngOnInit 初始化 NavigationPathComponent 时在控制台记录“los”。

问题是它有一个价值。它将 someString 记录到控制台（或警报取决于我决定如何显示它。