Góc 2 Nhiều thành phần trên cùng một trang

Question

Tôi đang làm việc từ mã khởi động nhanh Angular 2 trên tệp app.component.ts.

Các tập tin trông như thế này:

import {Component} from 'angular2/core'; 

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

này hoạt động như mong đợi.

Những gì tôi muốn làm là để thêm thành phần khác trên trang này cùng ... vì vậy tôi cố gắng này:

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 { } 

này không hoạt động ... Là nó mà tôi đang làm điều gì sai hoặc điều này không được phép?

Answer 1

Bạn không thể có hai thành phần gốc có cùng bộ chọn trong trang của mình, bạn cũng không thể có hai trang trí @Component() trên cùng một lớp.

Nếu các thành phần của bạn có bộ chọn khác nhau, chỉ cần chạy bootstrap cho mỗi thành phần gốc

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

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


bootstrap(AppComponent1) 
bootstrap(AppComponent2) 

Có một vấn đề mở để hỗ trợ trọng chọn để có thể thêm một gốc thành phần nhiều lần
- https://github.com/angular/angular/issues/915

Answer 2

Bạn không thể có thành phần với hai trình trang trí thành phần (@Component). Bạn cần phải tạo hai lớp khác nhau cho việc này:

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

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

Rồi bạn có thể sử dụng phương pháp này từ câu trả lời của Gunter ...

Answer 3

Trong trường hợp này có ích cho bất cứ ai, có thể làm điều tương tự với khung nội tuyến. Đã thực hiện một mẫu mà bạn có thể xem tại đây: http://plnkr.co/edit/xWKGS6

Về cơ bản tôi sử dụng iframe để tải một widget html

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

Các widget là một trang angular2 html bình thường