Проблема внедрения зависимостей для создания динамических компонентов с помощью ngComponentOutlet

Question

Проект требует динамического создания компонентов с помощью директивы ngComponentOutlet. Динамические компоненты будут получать данные, вставляя их в конструктор. Итак, как я могу передать эти данные в качестве параметра в конструкторе?

Я создал образец и ссылка https://angular -lqaeqp.stackblitz.io / нагрузка

Структура проекта:

1. HomeComponent - Начальная точка

2. Модуль LoadComponents - Ленивый загруженный модуль, который имеет 2 компонента

   (i) LoadComponents - значение по умолчанию для маршрута '/ load'

   (ii) Component1Component - динамический компонент, который будет создан из LoadComponents

LoadComponents имеет следующий код для создания:

<ng-container *ngComponentOutlet="component;injector: injectData;"></ng-container>

3. Модель содержимого - модель, которую необходимо внедрить в Component1Component

Если я удаляю код впрыска, приложение работает, в противном случае выдает ошибку:

Error: StaticInjectorError(AppModule)[Component1Component -> Content]

В настоящее время я решил проблему проекта с помощью плагина "ng-dynamic-component", который работает как шарм. Но я должен применить директиву Angular ngComponentOutlet.

Answer 1

Сервис и Компонент различного назначения в Angular

Сервис - это широкая категория, охватывающая любое значение, функцию или функцию, которая нужна приложению.Служба обычно представляет собой класс с узкой, четко определенной целью.Он должен делать что-то конкретное и делать это хорошо.

Angular отличает компоненты от сервисов для повышения модульности и возможности повторного использования.Отделяя функциональность, относящуюся к представлению компонента, от других видов обработки, вы можете сделать свои классы компонентов эффективными и эффективными.

Поскольку вы используете Injectable decorator внутри content.module.ts, вам не следует использовать @Входной декоратор.Тогда не инициализируйте объект новым ключевым словом.Создание объекта с новым ключевым словом используется для создания объектов, которые нельзя ввести.Ссылка: Angular2 - вызов конструктора () против нового ключевого слова для создания объекта?

content.model.ts

import { Injectable } from '@angular/core';    
@Injectable({
  providedIn: 'root',
})
export class Content {
   Code: string ;
   HTML: string;
}

Пример:https://stackblitz.com/edit/angular-favvmz

Answer 2

Вы вводите Content в свой компонент, поэтому он должен быть инъецируемым:

@Injectable({
  providedIn: 'root',
})
export class Content {
    @Input() public Code: string;
    @Input() public HTML: string;
}

Ваш фиксированный StackBlitz

PS. Всегда включайте тревожный код в свой вопрос!