Góc 2 - Tương đương với Phạm vi gốc là gì?

Question

Tất cả! Tôi đã thành phần này ở đâu khi tôi bấm vào href nó là vụ phải thiết lập một biến như gốc Phạm vi nếu nó là góc 1 như thế này:

selector: 'my-component' 
template : ` 
      <div (click)="addTag(1, 'abc')">` 

constructor() { 
    this.addTag = function(id, desc){ 
     myGlobalVar = { a: id, b: desc}; 
    }; 

Sau đó, trong thành phần của bố mẹ tôi, những trang đó (trong thực tế) Tôi nên làm một cái gì đó như:

<my-component></my-component> 
<p>My Component is returning me {{ ?????? }} 

Cách tiếp cận tốt nhất để làm điều đó là gì?

Answer 1

Để triển khai biến toàn cầu, bạn có thể triển khai dịch vụ được chia sẻ. Bạn sẽ có thể lưu dữ liệu và tất cả các thành phần có thể có quyền truy cập vào chúng.

Đối với điều này, bạn chỉ cần thực hiện một dịch vụ và thiết lập nhà cung cấp của mình khi boostrapping ứng dụng của bạn:

bootstrap(AppComponent, [ MySharedService ]); 

Hãy cẩn thận không để xác định nó một lần nữa trong providers thuộc tính của các thành phần mà bạn muốn sử dụng nó.

mẫu

Các dịch vụ:

export class MySharedService { 
    data: any; 
    dataChange: Observable<any>; 

    constructor() { 
    this.dataChange = new Observable((observer:Observer) { 
     this.dataChangeObserver = observer; 
    }); 
    } 

    setData(data:any) { 
    this.data = data; 
    this.dataChangeObserver.next(this.data); 
    } 
} 

Sử dụng nó vào một thành phần:

@Component({ 
    (...) 
}) 
export class MyComponent { 
    constructor(private service:MySharedService) { 
    } 

    setData() { 
    this.service.setData({ attr: 'some value' }); 
    } 
} 

Nếu bạn muốn thông báo cho các thành phần dữ liệu đã được cập nhật, bạn có thể tận dụng các lĩnh vực quan sát được vào dịch vụ được chia sẻ:

@Component({ 
    (...) 
}) 
export class MyComponent { 
    constructor(private service:MySharedService) { 
    this.service.dataChange.subscribe((data) => { 
     this.data = data; 
    }); 
    } 
} 

Xem câu hỏi này để biết thêm chi tiết:

• Delegation: EventEmitter or Observable in Angular2

Trang này trên trang web angular.io cũng có thể bạn quan tâm:

• https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

Trong Angular2, khái niệm phạm vi giờ đây tương đương với các biến thành viên và các thuộc tính @Input của một thành phần hoặc chỉ thị. Khi chúng tham chiếu đến các phần tử DOM, các thuộc tính có thể kết buộc cũng bao gồm các thuộc tính hoặc thuộc tính đó của chính phần tử DOM.

Trong Angular1, bạn có thể xác định biến phạm vi trên $rootScope và tham chiếu nó trong phạm vi con lồng nhau sâu mà không chuyển nó thành chỉ thị vì bản chất nguyên mẫu của kế thừa phạm vi. Trong Angular2, không có kế thừa phạm vi. Nếu bạn muốn chuyển dữ liệu từ phạm vi thành phần của cha mẹ đến phạm vi con ngay lập tức, bạn phải làm như vậy một cách rõ ràng mặc dù ràng buộc @Input của chỉ thị. Ví dụ: <directive [myBinding]="model"></directive>, thuộc tính model trong phạm vi thành phần chính được chuyển vào phạm vi chỉ thị của trẻ thông qua thuộc tính @Input của chỉ thị có tên là myBinding.

Tương đương gần nhất với $ rootScope là câu trả lời của @ Thierry: sử dụng dịch vụ được chia sẻ để truy xuất và thay đổi dữ liệu, có thể được đưa vào bất kỳ thành phần nào thông qua DI. Không giống như Angular1, trong đó có một vòi phun toàn cầu, Angular2 giới thiệu khái niệm về một bộ phun phân cấp. Mỗi thành phần trong chuỗi thứ bậc của các thành phần có thể định nghĩa nó là bộ phun riêng. Trong Angular2, hệ thống phân cấp của các kim phun tham gia vào độ phân giải kiểu theo cách tương tự mà các biến $ scope đã được giải quyết trong Angular1 bằng cách sử dụng thừa kế phạm vi $.

Answer 3

Bạn có thể thực hiện điều này bằng cách sử dụng góc BehaviorSubject và asObservable

Kiểm tra bên dưới mã ví dụ

tập tin Dịch vụ

@Injectable() 
export class commonService { 
    private data = new BehaviorSubject(''); 
    currentData = this.data.asObservable() 

    constructor() { } 

    updateMessage(item: any) { 
     this.data.next(item); 
    } 

} 

Hợp phần 1

Đặt dữ liệu từ bất kỳ thành phần

constructor(private _data: commonService) { } 
shareData() { 
     this.currentValue = this.queryTerm; 
     this._data.updateMessage(this.currentValue); 
    } 

Nghe từ bất kỳ thành phần

constructor(private _data: commonService) { } 
ngOnInit() { 
     this._data.currentData.subscribe(currentData => this.currentValue = currentData) 
    } 

Bạn có thể giao tiếp giữa bất kỳ thành phần sử dụng theo cách này.

More Info và khác 7 methods