Question

我很难从“子”组件获取触发器来触发app.component.ts中的ngif。

我将尝试解释该项目的结构。

在app.component.html中，我的路由器出口的定义如下：

<router-outlet></router-outlet>

我还有一个菜单组件，像这样包含。

<app-menu *ngIf="toggle"></app-menu>

用户在login.ts组件中提供其凭据，该组件将为该用户生成一个新菜单。这是问题所在，我无法从login.ts触发app.ts中的ngIf。刷新页面后，将获得正确的菜单。

Answer 1

将模板变量添加到您的app.component.html：

<router-outlet></router-outlet>
<app-menu *ngIf="toggle" #menu></app-menu> <!-- Please note the template variable!  -->

在您的app.component.ts中，您想使用@ViewChild()装饰器来访问孩子：

export class AppComponent {
  @ViewChild('menu') menu;

  // this is how you'll access toggle to get it to work with your code.
  get toggle() {
    return this.menu.toggle;
  }
}

希望有帮助！

Answer 2

创建一个从父级到子级的绑定，以根据app.ts中发生的某些事件将一些参数传递回login.ts。

See Component Interaction Angular docs.

Answer 3

最好的方法是在app.component可以订阅的服务中实现BehaviorSubject。订阅者会监视它的任何更改，您可以相应地更新组件

可以在https://stackblitz.com/edit/angular-login-using-behaviou-subject看到一个示例

Answer 4

我有一个类似的问题，即即使ngIf组件为true，也无法将其加载到dom。 stackblitz示例 https://stackblitz.com/edit/angular-error-when-child-component-has-ngif

通过添加viewChild组件解决了该问题

从子组件触发Angular NG IF

4 个答案: