Góc 2 đầu vào bên ngoài

Question

Vui lòng giúp bạn? Chỉ cần bắt đầu với Angular 2 và gặp vấn đề sau.

thành phần của tôi là dưới đây:

@Component({ 
    selector: 'myapp', 
    inputs: ['mynumber'] 
}) 
@View({ 
    template: `<p>The next number is {{ mynumber + 1 }}</p>' 
}) 
export class App { 
    mynumber: number; 
} 
bootstrap(App); 

Bên trong HTML của tôi:

<myapp [mynumber]='41'></myapp> 

Nhưng khi chạy tôi nhận được như sau:

Số tiếp theo là NaN

Có vẻ đơn giản nhưng tôi thiếu cái gì đó. Những gì tôi đang cố gắng đạt được là truyền một giá trị từ bên ngoài ứng dụng vào nó.

Cảm ơn.

Answer 1

Bạn không thể chỉ định thuộc tính ràng buộc (đầu vào) cho thành phần gốc của ứng dụng của bạn. Nếu bạn thực sự muốn chỉ định một số ràng buộc cho nó, bạn nên sử dụng thành phần bổ sung. Xem this plunkers.

import {Component, Input} from 'angular2/angular2' 

@Component({ 
    selector: 'myapp', 
    template: ` 
    <p>The next number is {{ mynumber + 1 }}</p> 
    ` 
}) 
class App { 
    @Input() mynumber: number; 
} 

@Component({ 
    selector: 'root', 
    directives: [App], 
    template: ` 
    <myapp [mynumber]="41"></myapp> 
    ` 
}) 
export class Root {} 

Answer 2

Một cách giải quyết được đọc nó trực tiếp sử dụng ElementRef:

constructor(elementRef:ElementRef) { 
    console.log(elementRef.nativeElement.getAttribute('someattribute'); 
} 

và sử dụng nó như

<myapp mynumber='41'></myapp> 

Xem thêm https://github.com/angular/angular/issues/1858

Answer 3

Update để câu trả lời bằng ElementRef: sử dụng Renderer. thay vào đó hãy chọnRootElement. Bất kỳ ai đang cố gắng sử dụng ElementRef.nativeElement có thể thấy nhiều cảnh báo về cách đây là phương sách cuối cùng, vv Đây là phiên bản được sửa đổi, an toàn hơn.

constructor(renderer: Renderer){ 
    let rootElement = renderer.selectRootElement('app-root'); 
    this.whateverInput = rootElement.getAttribute('my-attribute'); 
} 

Answer 4

Đối với những người sử dụng góc 4: Nếu bạn quyết định sử dụng nó như một thuộc tính như vậy

<myapp mynumber='41'></myapp> 

Bạn chỉ có thể sử dụng các chú thích @Attribute như thế:

class Component { 
    constructor(@Attribute('attributeName') public param:String){ 
     /** some process with your injected param **/ 
    } 
} 

Đã thử nghiệm và làm việc thành công trong ứng dụng của tôi.

Tìm đường: https://gillespie59.github.io/2015/10/08/angular2-attribute-decorator.html