Angular 在组件内嵌套哑组件并仅显示给特定页面或父组件答案

【问题标题】：Angular nesting dumb component inside a component and show only to a specific page or parent componentAngular 在组件内嵌套哑组件并仅显示给特定页面或父组件
【发布时间】：2018-08-16 00:12:41
【问题描述】：

我正在使用一个 Ionic 3 应用程序，并且我有 2 个 Dumb 或演示组件。第一个组件是<ion-navbar> 组件，里面是另一个组件<header-wallet-badge></header-wallet-badge>

问题是我的所有父组件或页面都不需要我的 <header-wallet-badge> 组件。我将input decorator 动态传递给navbar 以显示页面的标题，我只使用*ngIf 作为<header-wallet-badge></header-wallet-badge> 的页面标题。如下所示。

<ion-navbar class="bg-gradient">
    <ion-title>{{ titlePage }}</ion-title>
    <ion-buttons left>
      <button ion-button icon-only menuToggle>
        <ion-icon name="app-svg-menu"></ion-icon>
      </button>
    </ion-buttons>
    <header-wallet-badge *ngIf="titlePage!='Settings'"></header-wallet-badge>
  </ion-navbar>

这是一种不好的做法吗？还是我做错了。这个问题没有错误。在我执行if else 语句之前，我已经在我的所有导航栏 中实现了<header-wallet-badge></header-wallet-badge>。

如果有人可以提供帮助，我们将不胜感激。提前致谢

【问题讨论】：

您的问题只是这是否是不好的做法吗？还是它的某些部分不起作用？如果是前者，它看起来很好。如果是后者，您能否详细说明您看到的问题？
是的。我还没有实现。但我认为它会起作用，但这是一种很好的架构风格还是构建我的应用程序的正确方法？ @DeborahK
这是一个非常小的sn-p代码和一个非常大的问题。 :-) 但到目前为止对我来说看起来还不错。您是否有一些 ionic 示例应用程序可以用作示例？
我对智能组件和哑组件不太熟悉。我只是新手。它为我的应用程序提供了更简洁的结构。这是我第一次尝试这样做。所以我不必在需要的时候到处去重构一些代码。我只是想以正确的方式做到这一点并确保它。
这可能会有所帮助：blog.angular-university.io/…

标签： javascript angular ionic-framework ionic3 components

【解决方案1】：

我不知道titlePage是什么，但你为什么不用this.router.url呢？
如果titlePage是可以改天换的，我觉得this.router.url比较合适。

import { Router } from '@angular/router';
export class MyComponent implements OnInit {
public currentUrl = '';
constructor(private router:Router) { ... }

ngOnInit() {
    this.currentUrl = this.router.url; /// this will give you current url
}

【讨论】：

据我所知路由器还不支持 Ionic 3。
嗯，Ionic 3 使用this.navCtrl.getActive 怎么样？像这样let activeView = this.navCtrl.getActive(); if (activeView.component == SettingComponent) { }
是的，我能做到。那么这是比*ngIf 语句更好的替代方法吗？如是。你能举个完整的例子吗？