问题描述
我有三个组件:(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,反之亦然。