Передача и отображение компонентов angular 5

avatar
super7egazi
8 апреля 2018 в 00:38
47
1
0

У меня есть сценарий, в котором мне нужно передать список различных "компонентов" другому компоненту angular. Я передаю список компонентов в виде массива, используя @Input. Как я могу отобразить эти компоненты в HTML?

Источник

Ответы (1)

avatar
josavish
8 апреля 2018 в 05:16
0

Было бы полезно посмотреть код, чтобы иметь представление о том, чего вы пытаетесь достичь.

Из документации, @Input()

  • Свойство Input — это устанавливаемое свойство, аннотированное декоратором @Input. Значения поступают в свойство, когда оно привязано к данным с привязкой свойства
    • .

Аннотация @Input() используется для передачи данных. Он не используется для передачи компонентов другому компоненту.

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

  • selector: селектор CSS, который сообщает Angular создать и вставить экземпляр этого компонента везде, где он находит соответствующий тег в HTML-шаблоне. Например, если HTML-код приложения содержит , Angular вставляет экземпляр представления HeroListComponent между этими тегами.

app-hero-list.component.ts

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

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})

app.component.html

Затем вы можете сослаться на этот селектор как на пару тегов HTML в шаблоне другого компонента.

<app-hero-list></app-hero-list>

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

Если вам нужен более подробный ответ, дополните свой вопрос примером кода.