Angular不渲染我的嵌套組件的原因？

我試圖通過<outerElementSelector><innerElementSelector></innerElementSelector></outerElementSelector>在另一個第三個組件的 HTML 檔案中將它們的元素選擇器相互寫入來嵌套兩個組件。我發現我<innerElementSelector>的頁面沒有呈現。

注意：上面提到的選擇器名稱是虛構的，不是代碼的一部分，我只是用它們來解釋我的問題。此外，瀏覽器的控制臺上也沒有錯誤。是的，我在app.module.tsfor Angular 中提到了組件，以了解我們的組件

我有 3 個組件servers, server, successalert。該servers.component.html檔案包含另外兩個名為app-server和app-successalert嵌套形式的選擇器，其中<app-successalert>標簽嵌套在<app-server>標簽中。

服務器.component.html

<app-server>
    <app-successalert></app-successalert>
</app-server>

服務器.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css']
})
export class ServersComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}
// IGNORE OnInit AND CONSTRUCTOR();

server.component.html

<h3>Server Component</h3>

server.component.ts

import { Component } from "@angular/core";

@Component({
    selector: 'app-server',
    templateUrl: './server.component.html',
    styles: [`
        h3 {
            color: orange;
        }
    `]
})
export class ServerComponent {}

successalert.component.ts

import { Component } from "@angular/core";

@Component({
    selector: 'app-successalert',
    template: `<p>You are so successfull, Congratzs</p>`,
    styles: [`p{
        color: green;
        padding: 10px;
        background-color: lightgreen;
        border: 1px solid green;
        font-weight: bold;
    }`]
})
export class SuccessAlert {} 

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';
import { ServersComponent } from './servers/servers.component';
import { SuccessAlert } from './successalert/successalert.component';
import { WarningalertComponent } from './warningalert/warningalert.component';

@NgModule({
  declarations: [
    AppComponent,
    ServerComponent,
    ServersComponent,
    SuccessAlert,
    WarningalertComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<h3>Hello, I am Core</h3>
<hr>
<app-servers></app-servers>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

只是一個快速說明：像我這樣的其他<app-root>, <app-servers>, <app-server>組件正在渲染只是嵌套組件沒有渲染（app-successalert）。

我嘗試了上述代碼并期望（當它嵌套在中時）會導致在You are so successful, Congratzs螢屏上顯示 ，但它本身不會在螢屏上呈現。

當我像下面的代碼一樣放在組件之外時，基本上當我不嵌套它們時，它們會呈現在螢屏上。

服務器.component.html

<app-server></app-server>
<app-successalert></app-successalert>

為什么會這樣？

uj5u.com熱心網友回復：

添加 <ng-content></ng-content>到您的 ServersComponent 模板。所以它變成：

server.component.html

<h3>Server Component</h3>
<ng-content></ng-content>

所以如果你想在另一個組件中投影一些內容，那么應該使用內容投影。

在這里閱讀更多 Angular Docs

uj5u.com熱心網友回復：

你需要ng-content做內容投影。

所以你的服務器模板server.component.html應該是：

<h3>Server Component</h3>
<ng-content></ng-content>

uj5u.com熱心網友回復：

如果您希望組件呈現子內容，您需要使用 ng-content 標簽定義放置內容的位置。更多資訊可以在https://angular.io/guide/content-projection找到。

因此，在您的情況下，您應該使 server.component.html 看起來像

<h3>Server Component</h3>
<ng-content></ng-content>

標籤：有角度的角度分量

上一篇：當角度中沒有評論時顯示沒有評論訊息

下一篇：需要以角度隱藏損壞的影像圖示