Угловое 2 Более одного компонента на одной странице

Я работаю из кода быстрого запуска Angular 2 в файле app.component.ts.

Файл выглядит следующим образом:

import {Component} from 'angular2/core'; @Component({ selector: 'app', template: `<h1>Title Here</h1>' }) export class AppComponent { } 

Это работает так, как ожидалось.

Я хочу сделать еще один компонент на этой же странице … поэтому я попробовал это:

 import {Component} from 'angular2/core'; import {ComponentTwo} from 'angular2/core'; @Component({ selector: 'app', template: `<h1>Title Here</h1>' }), @Component({ selector: 'appTwo', template: `<h1>Another Title Here</h1>' }) export class AppComponent { } 

Это не работает … Неужели я делаю что-то неправильно или это не разрешено?

  • Angular2: включая скрипты js третьих сторон в компоненте
  • Как передать несколько параметров в @Directives в Angular 2 с помощью TypeScript?
  • Угловое изменение свойства CSS CSS
  • Как добавить условный атрибут в Angular 2?
  • Как подписаться на мероприятие на службе в Angular2?
  • Где добавить функциональность REST API в ионную структуру 3.x?
  • Замена оператора Элвиса Angular2 в машинописном машиностроении
  • Как использовать трубку в компоненте в угловом 2?
  • 3 Solutions collect form web for “Угловое 2 Более одного компонента на одной странице”

    У вас не может быть двух корневых компонентов с одним и тем же селектором на вашей странице, вы также не можете иметь двух декораторов @Component() в одном классе.

    Если у ваших компонентов есть разные селекторы, просто запустите bootstrap для каждого корневого компонента

     @Component({ selector: 'app', template: '<h1>AppComponent1</h1>' }) export class AppComponent1 { } @Component({ selector: 'appTwo', template: '<h1>AppComponent2</h1>' }) export class AppComponent2 { } bootstrap(AppComponent1) bootstrap(AppComponent2) 

    Существует открытая проблема для поддержки переопределения селектора, чтобы иметь возможность добавлять корневой компонент несколько раз
    https://github.com/angular/angular/issues/915

    У вас не может быть компонента с двумя компонентами-декораторами (@Component). Для этого вам нужно создать два разных класса:

     @Component({ selector: 'app', template: `<h1>Title Here</h1>` }) export class AppComponent { } @Component({ selector: 'appTwo', template: `<h1>Another Title Here</h1>` }) export class AppComponent1 { } 

    Тогда вы можете использовать подход из ответа Гюнтера …

    Incase это полезно для всех, может сделать то же самое с iFrames. Сделанный образец вы можете посмотреть здесь: http://plnkr.co/edit/xWKGS6

    В основном я использую iframes для загрузки виджета html

     <iframe src="widget.html" width="500" height="400" style="border:none; background-color:#ccc"> </iframe> 

    Виджет – обычная угловая2 html-страница

    JavaScript делает сайт умным, красочным и простым использованием.