Giả sử có một khung đơn giản để hiển thị cửa sổ bật lên:
@Component(
selector: 'popup-host',
template: '''
<div class="popup-container">
<ng-template #popupRef></ng-template>
</div>
''',
styles: ['.popup-container { position: absolute; top: 100; left: 100; z-index: 100; }'],
)
class PopupContainerComponent {
final PopupController _controller;
final ComponentLoader _loader;
PopupContainerComponent(this._controller, this._loader);
void ngOnInit() {
_controller.container = this;
}
@ViewChild('popupRef', read: ComponentRef)
ComponentRef popupRef;
void render(PopupConfig config) {
final componentRef = _loader.loadNextTo(config.factory, popupRef);
if (componentRef.instance is HasValueSetter) {
componentRef.instance.value = config.value;
}
}
}
@Injectable()
class PopupController {
PopupContainerComponent _container;
set container(PopupContainerComponent container) => _container = container;
void showPopup(PopupConfig config) {
container.render(config);
}
...
}
class PopupConfig {
final ComponentFactory factory;
final dynamic value;
PopupConfig(this.factory, [this.value]);
}
abstract class HasValueSetter {
set value(dynamic value);
}Điều này sau đó có thể được sử dụng như thế này:
// Somewhere in the root template
<popup-host></popup-host>
// In popup.dart
@Component(
selector: 'happy-popup',
template: '''
<div class="header">This is the popup content.</div>
<div class="main">The value is {{value}}.</div>
<div class="footer">I am happy!</div>
''',
)
class HappyPopupComponent implements HasValueSetter {
@override
dynamic value;
}
// In some_other.dart
@Component(
...
styles: [
'.header { font-weight: bold }',
'.main { color: red }',
'.footer { color: green; font-style: italic }',
],
...
)
class SomeOtherComponent {
final PopupController _popupController;
...
SomeOtherComponent(this._popupController, ...) ...;
void displayPopup() {
_popupController.showPopup(HappyPopupComponentNgFactory, 42);
}
}
...Có cách nào để chuyển tiếp các kiểu từ <some-other-component>đến <happy-popup>mà không phải xác định chúng ở gốc của ứng dụng không?
PopupConfig. Có thể tùy chỉnh thuộcstyleUrlstính trên một thành phần trong thời gian chạy không?