Невозможно использовать селектор подкомпонента в 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.com с модулем, у меня нет доступа к его селектору.Я забыл некоторые операторы импорта / экспорта.Является ли это на самом деле неправильным пониманием угловой архитектуры / принципа структуры?Файл task.component.html состоит только из
<p> task works! </p> Редактировать:

Я также получил следующую ошибку от консоли клиента: [

Answer 1

Фактически перезапуск сервера с ng serve не решил проблему и, следовательно, не был ответственным за отсутствующую интерполяцию шаблона компонента.

Восстановление приложения было единственным (и самым уродливым) вариантом для менячто вызвало дополнительную работу, конечно.

1. Удалите все файлы вашего проекта (все файлы в слое, в котором, среди прочего, находится node_modules) *
2. Настройка проекта с помощью ng new (...)
3. Создание чистых компонентов с помощью команд терминала (ng g c (...) / ng generate component (...))

Answer 2

Я не знаю, что вы имели в виду для связывания компонентов?

Следуя структуре, которой вы поделились, она работает, если вы хотите что-то увидеть, вы должны создать файл task-component.html, потому что он не существует..

И идея компонента заключается в том, что для работы каждого компонента должен быть свой логический независимый элемент.

И способы совместного использования ресурсов - использование EventEmitters или свойств привязки.

ЭтоСценарий, который я видел, и я вижу созданный компонент.

Answer 3

Что именно показывает вместо селектора <app-task></app-task>, который вы добавили в app.component.html ??Какая ошибка в консоли.Этот селектор должен работать и отображаться в TaskComponent html view !!!!

Answer 4

Попробуйте перезапустить подачу после ее остановки.Надеюсь, что вы добавили компонент с помощью команды Angular-Cli - ng generate component task

Answer 5

Чтобы добавить новый компонент в модуль, над которым вы работаете (в вашем случае это AppModule), вы сначала создаете компонент (для этого просто используйте AngularCLI, выполнив команду ng g c task), и Angular.CLI автоматически добавляет его в ваш массив AppModule declarations.Затем вы можете просто добавить тег селектора в ваш app.component.html, чтобы загрузить его

Просто добавьте <app-task></app-task> в ваш app.component.html

ОБНОВЛЕНИЕ

В некоторых случаях, даже если вы все делаете правильно, Angular не распознает компонент, который был добавлен недавно. Попробуйте сломать локальную службу на Ctrl + C в Windows или Cmd + C в Mac. А затем запустите ng serve, чтобы снова запустить приложение. Это обычно происходит, когда компонент добавляется во время работы сервера.

Вот Образец StackBlitz для вашего рефери, просто чтобы перепроверить, если вы что-то пропустили.