Xuất mảng các thành phần trong Angular 2

Question

Tôi đang xây dựng một thành phần phương thức trong Angular 2 (và TypeScript) sẽ có các khung nhìn/trang khác nhau. Nó sẽ không có các tab, nhưng khái niệm này khá giống nhau. Về cơ bản tôi đang đấu tranh để tìm một cách tiếp cận để làm điều này.

Trong thành phần phương thức của mình, tôi muốn xuất các chế độ xem/trang khác nhau. Mỗi người nên là một thành phần chính nó, bởi vì họ không có bất kỳ điểm chung nào. Ngoài ra, họ sẽ tìm nạp dữ liệu từ các lớp dịch vụ, vì vậy tôi cần có khả năng viết logic cụ thể cho từng chế độ xem.

Về cơ bản những gì tôi muốn là một cái gì đó như:

// Within my modal component's template 
<div *ngFor="#view of views"> 
    // Render view component here 
</div> 

đâu views có thể là một mảng của các thành phần, ví dụ. Vấn đề đầu tiên và chính của tôi là tôi không chắc chắn làm thế nào để sản xuất một bộ sưu tập các quan điểm của tôi (các thành phần).

Làm cách nào để có thể xuất tập hợp các thành phần trong thành phần khác?

Ngoài ra, tôi cần một cách để ẩn và hiển thị lượt xem, đó là điều duy nhất mà lượt xem có điểm chung. Tôi đã nghĩ đến việc thêm biến số isActive vào chế độ xem và hiển thị/ẩn chúng dựa trên đó. Nó sẽ là thực hành xấu cho các thành phần quan điểm để thực hiện một giao diện ModalView hoặc mở rộng từ một lớp cơ sở để thêm logic này? Từ thành phần phương thức của tôi, tôi muốn có thể kiểm soát xem được hiển thị, vì vậy tôi cần các khung nhìn để có logic này.

Tôi hy vọng nó rõ ràng những gì tôi muốn làm. Các giải pháp có thể đơn giản, nhưng ngay bây giờ tôi là một chút bối rối về cách đi về nó. Một ví dụ mã sẽ được nhiều đánh giá cao!

Answer 1

Bạn có thể tạo "nhà máy thành phần" làm chỉ thị tải các thành phần phù hợp bằng cách sử dụng DynamicComponentLoader, dựa trên thông số bạn chuyển từ phương thức của mình.

<component-factory *ngFor="#view of views" 
    (loaded)="addComponent($event)" 
    [name]="view.name" 
    [visible]="view.visible"></component-factory> 

@Directive({ selector: 'component-factory' }) 
class ComponentFactory { 
    @Input() name; 
    @Input() visible; 
    @Output() loaded = new EventEmitter(); 
    constructor(
    private _dcl: DynamicComponentLoader, 
    private _eref: ElementRef) { 

    // import OneCmp, TwoCmp in this file... 
    private components: { one: OneCmp, two: TwoCmp } 

    ngOnInit() { 
    this._dcl.loadNextToLocation(
     this.components[this.name], 
     this._eref) 
     // pass values to the loaded components 
     // and send it's instance to the parent 
     .then((ref: ComponentRef) => { 
     ref.instance.visible = this.visible; 
     this.loaded.emit(ref.instance) 
     }); 
    } 
} 

Answer 2

Angular2 động Render Template

import { Component, View, DynamicComponentLoader, ElementRef} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser' 

@Component({ 
    selector: 'some-component', 
    properties: ['greeting'], 
    template: ` 
    <b>{{ greeting }}</b> 
    ` 
}) 
class SomeComponent { } 




@Component({ 
    selector: 'app' 
}) 
@View({ 
    template: ` 
    <h1>Before container</h1> 
    <div #container></div> 
    <h2>After container</h2> 
    ` 
}) 
class App { 
    loader: DynamicComponentLoader; 
    elementRef: ElementRef; 

    constructor(loader: DynamicComponentLoader, elementRef: ElementRef) { 
    this.laoder = loader; 
    this.elementRef = elementRef; 

    // Some async action (maybe ajax response with html in it) 
    setTimeout(() => this.renderTemplate(` 
     <div> 
    <h2>Hello</h2> 
    <some-component greeting="Oh, hey"></some-component> 
     </div> 

mã đầy đủ: https://github.com/guyoung/GyPractice-Angular2Advanced/tree/master/apps/dynamically_render_template