無法在Angular中使用子組件的選擇器

Question

我想將task.component的視圖“插入”到我的主app.component.html（根模板）中，如下所示：

（app.module.ts）

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

import { AppComponent } from './app.component';
import { TaskComponent } from './task/task.component';

@NgModule({
  declarations: [
    AppComponent,
    TaskComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

（app.component.ts）

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

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

（task.component.ts）

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

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

export class TaskComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    console.log("Task comonent initialized!");
  }

}

（app.component.html）

 <!--The content below is only a placeholder and can be replaced.--> <app-task></app-task> <div style="text-align:center"> <h1> Welcome to {{ title + 1 }}! </h1> <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="> </div> <h2>Here are some links to help you start: </h2> <ul> <li> <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2> </li> <li> <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2> </li> <li> <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2> </li> </ul> 

因此，盡管事實上我已將task.component鏈接到模塊，但我無權訪問其選擇器。 我忘了一些進出口聲明嗎？ 這實際上是對Angle的體系結構/結構原理的誤解嗎？ 文件task.component.html僅包含
<p> task works! </p> <p> task works! </p>修改：

我還從客戶端的控制台收到以下錯誤：[

Answer 1

要將新組件添加到您正在使用的模塊（本例中為AppModule），首先創建一個組件（只需使用AngularCLI通過運行命令ng gc task來執行此ng gc task ），然后Angular CLI自動添加它到您的AppModule的declarations數組。 然后，您可以簡單地將選擇器標記添加到您的app.component.html中以進行加載

只需將<app-task></app-task>到您的app.component.html

UPDATE

在某些情況下，即使您正確完成了所有操作，Angular也無法識別最近添加的組件。 嘗試在Windows上通過Ctrl + C或在Mac上通過Cmd + C 破壞本地服務 。 然后運行ng serve再次提供該應用程序。 通常在服務器運行時添加組件時會發生這種情況。

這是供您參考的Sample StackBlitz示例，用於交叉檢查是否錯過了某些東西。

Answer 2

確切顯示在您添加到app.component.html中的選擇器<app-task></app-task> app.component.html嗎？ 控制台中出現什么錯誤。 此選擇器應正常工作，並呈現給TaskComponent html視圖！

Answer 3

我不知道鏈接組件是什么意思？

如果您希望看到某些內容，請遵循您共享的結構可以正常工作，因此必須創建task-component.html，因為該結構不存在。

組件的思想是每個組件必須具有其邏輯上的獨立性才能起作用。

共享資源的方法是使用EventEmitters或綁定屬性。

這是我看到的畫面，可以看到創建的組件。

Answer 4

實際上，使用ng serve重新啟動服務器並不能解決問題，因此不對缺少組件模板的插值負責。

重建應用程序是我的唯一（也是最丑陋的）選擇，這當然導致了其他工作。

1. 刪除項目中的所有文件（該層中放置了node_modules所有文件）
2. 用ng new (...)設置項目
3. 使用終端命令構建干凈的組件（ ng gc (...) / ng generate component (...) ）

Answer 5

停止后嘗試重新運行服務。 希望您使用Angular-Cli命令添加了組件ng generate component task