Góc 2: Các thành phần tự xóa khỏi DOM

Question

Tôi có một thành phần chính với hai thành phần con (dataset-create và dataset-detail) trong Angular2. Các điều khiển thành phần Chánh nào trong hai thành phần được hiển thị ở bất kỳ thời điểm nào bằng cách sử dụng mã này trong mẫu của nó:

phần

<div [ngSwitch]="mode"> 
<template [ngSwitchWhen]="'create'"> 
    <dataset-create [dataset]="dataset" (close)="onDatasetFormClose()"></dataset-create> 
</template> 
<template [ngSwitchWhen]="'detail'"> 
    <dataset-detail [dataset]="dataset" (close)="onDatasetFormClose()"></dataset-detail> 
</template> 
</div> 

Phụ huynh nghe cho sự kiện (close) từ trẻ em. Khi nó nhận nó, một hàm callback được gọi là (onDatasetFormClose()) trong đó có đoạn mã sau:

private onDatasetFormClose() { 
    this.mode = "list"; 
} 

chức năng này thay đổi giá trị của biến mode. Điều này làm cho cả hai câu lệnh ngSwitchWhen bị lỗi và do đó thành phần con hiện đang hoạt động bị hủy.

Ngoài ra, FYI, đây là cách mẫu của một trong những thành phần con trông giống như:

<form novalidate="novalidate"> 
    <button type="button" (click)="onClose()">close</button> 
    <button type="submit" (click)="onSubmit()">submit</button> 
    <label for="dataFileD">data</label> 
    <input id="dataFileD" type="file" (change)="onFileChange($event)"> 
</form> 

Tuy nhiên, giải pháp này có vẻ "sai" đối với tôi, bởi vì nó dựa trên các thành phần cha mẹ (do đó làm khó sử dụng lại nó một cách độc lập).

Tôi đoán một cách khác để đạt được kết quả tương tự sẽ là sử dụng bộ định tuyến. Giải pháp này không chỉ có âm thanh "quá cồng kềnh vì không có lý do", mà còn gặp vấn đề tương tự như giải pháp của tôi ở trên: thành phần con không thể được sử dụng độc lập.

Có thể xóa thành phần con khỏi DOM không? Cách chính xác để xử lý các tình huống như thế này là gì? Có lẽ có các thành phần loại bỏ bản thân khỏi DOM là một thực hành mã hóa Angular2 xấu?

Xin cảm ơn trước.

Answer 1

Tôi nghĩ rằng một thành phần cần có thành phần chính là tốt. Các thành phần phát ra một sự kiện thường yêu cầu một thành phần cha. Và đôi khi các thành phần được kết hợp chặt chẽ hơn, hoặc được dự định/bắt buộc phải được sử dụng cùng nhau. Ví dụ: để triển khai các tab, chúng tôi có thể cần một thành phần chính là tabset, ngoài các thành phần con tab. Ví dụ: xem ng2-bootstrap tabs implmenentation.

Dựa vào thành phần gốc cũng có thể là quyết định thiết kế có ý thức. Ví dụ: nếu chúng tôi đang lập mô hình ứng dụng của mình bằng cách sử dụng dữ liệu ứng dụng không thay đổi (xem Savkin blog), chúng tôi có thể cố ý ngăn chặn thành phần của chúng tôi sửa đổi bất kỳ dữ liệu ứng dụng nào. Nếu một hoạt động xóa là bắt buộc, chúng tôi có thể phát ra một sự kiện để có một số thành phần cấp cao hơn sửa đổi dữ liệu ứng dụng (và sau đó gửi lại cho chúng tôi thông qua một thuộc tính đầu vào).

Answer 2

Tại sao bạn không có cờ màu vàng là show trên thành phần phụ. Sau đó, chỉ cần thay đổi nó thành false khi bạn cần. Trong mẫu, chỉ cần bọc mọi thứ với