如何在其他组件中渲染角度组件？

Question

我做了一个离子和角度项目，但我在使它工作时遇到了一些困难，这是源代码，我遇到的主要问题是在 innsjekk 和 utsjekk 组件中使用导航栏组件。 我添加了选择器，没有任何错误，但它没有呈现。 同样在 popover 组件中，我向 profile 组件添加了一个 routerLink，但是当我单击它时没有任何反应。

popover.component.html：

<ion-list>
  <ion-item>
    <ion-icon name="person-circle-outline"></ion-icon>
    <ion-button routerLink="/profil" expand="block" fill="clear" shape="round">
      <ion-label>Profil</ion-label>
    </ion-button>
  </ion-item>

  <ion-item *ngIf="isAdmin">
    <ion-icon name="settings-outline"></ion-icon>
    <ion-button (click)="admin()" expand="block" fill="clear" shape="round">
      <ion-label>Admin</ion-label>
    </ion-button>
  </ion-item>

  <ion-item>
    <ion-icon name="log-out-outline"></ion-icon>
    <ion-button (click)="logut()" expand="block" fill="clear" shape="round">
      <ion-label>Log ut</ion-label>
    </ion-button>
  </ion-item>
</ion-list>

innsjekk.component.html：

<ion-header [translucent]="true">
  <app-navbar></app-navbar>
</ion-header>

<ion-content>
  <p>Hello world</p>
</ion-content>

Answer 1

我忘记将组件添加到模块声明中。 这样做解决了所有问题，我尝试构建项目然后我得到了解释问题的错误。

home.module.ts：

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
 import { HomePage } from './home.page';
 import { NavbarComponent } from './../components/navbar/navbar.component';
    
 import { HomePageRoutingModule } from './home-routing.module';
 import { AdminComponent } from '../admin/admin.component';
 import { InnsjekkComponent } from '../innsjekk/innsjekk.component';
 import { PopoverComponent } from '../components/popover/popover.component';
 import { LogoutComponent } from '../components/logout/logout.component';
    
    
    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        HomePageRoutingModule
      ],
      declarations: [HomePage, NavbarComponent, AdminComponent, InnsjekkComponent, InnsjekkComponent, PopoverComponent, LogoutComponent],
      exports: [NavbarComponent]
    })
    export class HomePageModule {}

Answer 2

如果您想将 HTML 作为参数传递给组件，有很多方法，各有优缺点。 主要不同：

1. 内容投影。 搜索<ng-content> 。 （最简单但有很大的局限性）
2. 将模板作为参数传递。 搜索@ContentChildren 、 TemplateRef 、 ViewContainerRef 、结构指令。 （灵活的）
3. 将组件的类型作为@Input并将其呈现在另一个内部（使用ViewContainerRef.createComponent 、 [ngComponentOutlet]等）。 （看起来很脏）

他们需要一些帮助代码。 他们可能有一些“变态”。 选择取决于许多原因。

分享