无法在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> 编辑：

我还从客户端控制台收到以下错误： [

Answer 1

要向正在使用的模块中添加一个新组件（本例中为AppModule），首先要创建一个组件（只需使用AngularCLI通过运行命令ng g c task即可）， Angular CLI会自动将其添加到您的AppModule的{​​{1}}数组中。然后，您只需将选择器标记添加到app.component.html即可加载

只需将declarations添加到您的app.component.html

更新

在某些情况下，即使您正确完成了所有操作，Angular也无法识别最近添加的组件。在Windows上通过<app-task></app-task>或在Mac上通过Ctrl + C 尝试破坏本地服务。 然后运行Cmd + C再次为应用提供服务。通常在服务器运行时添加组件时发生。

这里有一个Sample StackBlitz供您的裁判参考，以检查您是否错过了一些东西。

Answer 2

您在<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 g c (...) / ng generate component (...)）构建干净的组件

Answer 5

在停止服务后尝试重新运行。希望您使用Angular-Cli命令添加了组件- ng generate component task