Блог

Главная - Вопросы по программированию - Как убедиться, что компонент является частью модуля / вложенного компонента в шаблоне?

Как убедиться, что компонент является частью модуля / вложенного компонента в шаблоне?

#angular #components #parent-child #outlet

#угловатый #Компоненты #родитель-потомок #розетка

Вопрос:

Я изучаю Angular (не AngularJS), и у меня возникают проблемы с тем, чтобы мой шаблон правильно ссылался на компоненты. В настоящее время он, похоже, не «видит» ссылочный компонент, поэтому я либо не объявляю / импортирую его в нужном месте, либо я использую неправильную вещь для ссылки на компонент из шаблона, либо и то, и другое.

В любом случае, мне нужно знать, как заставить мой логотип отображаться в макетах из компонента.

Я предоставлю базовую версию проблемы:

main.ts

 import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { MonkeyModule } from './monkey/monkey.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(MonkeyModule)
  .catch(err => console.error(err));

index.html

 <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <parentComponent></parentComponent>
</body>
</html>

monkey.module.ts

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

import { parentComponent } from './parent.component';
import { childComponent } from './child.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    parentComponent,
    childComponent
  ],
  providers: [],
  bootstrap: [parentComponent]
})
export class MonkeyModule { }

parent.component.ts

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

import { childComponent } from './child.component';

@Component({
  selector: 'parentComponent',
  templateUrl: './parent.component.html'
})
export class parentComponent {
}

parent.component.html

 <div>
This is the Parent!
    <childComponent></childComponent>
</div>

child.component.ts

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

@Component({
  selector: 'childComponent',
  templateUrl: './child.component.html'
})
export class childComponent {
}

child.component.html

 <div>
    This is the child.
</div>

Комментарии:

1. Если вы используете ng g c componentname, он выполняет всю регистрацию модуля / компонента.

2. Можете ли вы показать / связать базовый пример? Часть проблемы заключается в том, что то, что вы сказали, может быть правильным, но я не знаю, что это значит.

3. Таким образом, очевидно, что «ng g c componentname» ссылается на командную строку узла js. Это также не сработало: я заменил новый компонент, и он по-прежнему выдает ту же ошибку.

4. Я думаю, вам нужно прочитать немного больше об Angular. ‘ng g c ComponentName’ является фундаментальной частью Angular CLI. Когда мы пытаемся что-то делать самостоятельно, это заставляет нас копать глубже, чем мы хотим. Angular CLI уже создает компоненты и автоматически регистрирует их в app.module. Не помешает узнать, как это сделать без CLI, но почему? Пусть CLI научит нас. Тогда ответ заключается в том, что NgModule должен импортировать каждый компонент и регистрировать их.

5. Это не сработало. Он выводит журнал созданных и обновленных файлов, поэтому я знаю, что не пропустил ничего, чего он не делал, как созданный вручную, так и созданный из CLI, оба соответствуют шаблону, приведенному в моем вопросе. Использование имени селектора и имени компонента из сгенерированного компонента привело к той же ошибке, которую я получил от созданного вручную компонента.

Ответ №1:

После множества экспериментов вся проблема, похоже, сводится к заглавной букве в селекторе.

Следующее решает мою проблему с модулем обезьяны: parent.component.html

 <div>
This is the Parent!
    <child-component></child-component>
</div>

child.component.ts

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

@Component({
  selector: 'child-component',
  templateUrl: './child.component.html'
})
export class childComponent {
}