如何在我的 Angular 应用程序中点击链接时动态添加组件

如何解决如何在我的 Angular 应用程序中点击链接时动态添加组件

我有三个组件：(1) 导航栏，(2) 带有左右 div 的主页，以及 (3) 视图关联。在导航栏的链接上，我想将视图关联组件动态添加到主页的右侧 div 中。我已经在 navbar-component.ts 文件中实现了以下代码（以传统的 JavaScript 方式）：

addTemplateTag(){
    const link = document.querySelector('.nav-link');
    const showArea = document.getElementById('showArea');
    console.log(link);
    console.log(showArea);

    // check for specific class name to get appropriate template tag
    if (link.classList.contains('view-associates')){
      console.log('Found view-associates class in link. Getting tag...');
      // NOTE: the below two lines did work BUT still did not show component
      const templateTag = document.createElement('app-view-associates');
      showArea.appendChild(templateTag);
    }
  }

这是分别带有导航栏和主页组件的 HTML 代码：

navbar.component.html

<nav class="nav flex-column">
    <a class="nav-link view-associates" (click)="addTemplateTag()">View My Associates</a>
</nav>

home.component.html（链接点击前）

<div class="container-fluid">
    <div class="float-left left">
        <h1 class="title">Welcome</h1>
        <app-nav-bar></app-nav-bar>
        <button class="btn btn-primary logout-btn" (click)="logOut()">Log Out</button>
    </div>
    <div id="showArea" class="float-left right">
    </div>
</div>

home.component.html（点击链接后）

<div class="container-fluid">
    <div class="float-left left">
        <h1 class="title">Welcome</h1>
        <app-nav-bar></app-nav-bar>
        <button class="btn btn-primary logout-btn" (click)="logOut()">Log Out</button>
    </div>
    <div id="showArea" class="float-left right">
        <app-view-associates></app-view-associates>
        <-- ^^^ appended but component not showing -->
    </div>
</div>

以下是点击链接前后首页的图片：

之前（使用浏览器控制台）

之后（使用浏览器控制台）

上面的代码确实有效，但仍然根本没有显示视图关联组件。我该如何解决这个问题？任何建议表示赞赏。

解决方法

使用 ngIf 和 ngSwitch 动态显示/隐藏组件。例如：-

在 .html 中

<app-form></app-form>
<some-component *ngIf="isLoggedIn"></some-component>
<some-component *ngIf="!isWorking"></some-component>
<another-cool-component *ngIf="!isLoggedIn"></another-cool-component>

在 .ts 中

export class MyFunnyComponent implements OnInit {
  isLoggedIn = false;
  cartValue: number;

  constructor() {
  }

  ngOnInit(): void {
  }

}

显然还有其他一些方法可以处理这些情况，但一开始可能就足够了。我们可能还需要将 data 从 child 传递给 parent，反之亦然。