Góc 2, thành phần bên trong thành phần chính

Question

Tôi đã chơi với bản trình diễn góc 2 trên angular.io. Bây giờ tôi muốn tạo một thành phần mới và sử dụng nó trong ứng dụng của tôi.

ứng dụng hiện tại của tôi:

import {Component, Template, bootstrap} from 'angular2/angular2'; 
import {UsersComponent} from './components/users/component.js'; 

// Annotation section 
@Component({ 
    selector: 'my-app' 
}) 
@Template({ 
    url:"app.html" 
}) 
// Component controller 
class MyAppComponent { 
    newName:string; 
    names:Array<string>; 
    constructor() { 
    this.name = 'Florian'; 
    } 

    showAlert(){ 
    alert("It works"); 
    } 

    addName(){ 
    names.push(newName); 
    newName = ""; 
    } 
} 

bootstrap(MyAppComponent); 

thành phần của tôi:

import {Component, Template, bootstrap} from 'angular2/angular2'; 
// Annotation section 
@Component({ 
    selector: 'users' 
}) 
@Template({ 
    url:"./template.html" 
}) 
// Component controller 
class UsersComponent { 
    newName:string; 
    names:Array<string>; 
    constructor() { 

    } 

    addName(){ 
    names.push(newName); 
    newName = ""; 
    } 
} 

Tôi không chắc chắn nếu cú ​​pháp của thành phần người dùng của tôi là đúng cả.

My ứng dụng mẫu:

<h1>Hello {{ name }}</h1> 
<h2>{{2+2}}</h2> 
<hr /> 
<button (click)="showAlert()">Click to alert</button> 
<users></users> 

Vì vậy, làm thế nào để cấp điện cho thành phần người dùng?

Các lỗi tôi nhận được trong giao diện điều khiển:

"Error loading "components/users/component.js" at <unknown>↵Error loading "components/users/component.js" from "app" at http://localhost:8080/app.es6↵Cannot read property 'replace' of undefined" 

Answer 1

góc giới thiệu lịch có hai thành phần lồng nhau (lịch và lịch-cell) https://github.com/djsmith42/angular2_calendar.git. Từ những gì tôi có thể thấy có MyAppComponent bạn nên tham khảo Người dùng thành phần từ @ danh sách chỉ thị Mẫu của, như thế này:

@Template({ 
    url: System.baseURL+'app/components/calendar/calendar.html', 
    directives: [ 
    Foreach, 
    If, 
    CalendarCell 
    ] 
}) 

Answer 2

Trong liên kết này của Angular2 web https://angular.io/docs/ts/latest/tutorial/toh-pt3.html# bạn có thể thấy rằng việc thêm directives: [...] bên trong @Components ví dụ:

@Component({ 
    selector: 'my-app', 
    directives: [UsersComponent] 
}) 

nhưng nếu không thì liên kết sử dụng mẫu bên trong thành phần, không biết điều này có hiệu quả không nếu bạn sử dụng thành phần bên ngoài @Template({ url:"app.html"}).

bạn có thể xem tên tệp app.appcomponet.ts để biết thêm chi tiết, hy vọng có thể trợ giúp.