如何处理/提供@Input,并@Output在角2动态创建组件的属性?
这个想法是在调用createSub方法时动态创建(在这种情况下)SubComponent.分叉很好,但我如何为SubComponent中的属性提供数据.另外,如何处理/订阅SubComponent提供的事件?@Input@Output
例如: (两个部件在相同的NgModule)
AppComponent
@Component({
selector: 'app-root'
})
export class AppComponent {
someData: 'asdfasf'
constructor(private resolver: ComponentFactoryResolver, private location: ViewContainerRef) { }
createSub() {
const factory = this.resolver.resolveComponentFactory(SubComponent);
const ref = this.location.createComponent(factory, this.location.length, this.location.parentInjector, []);
ref.changeDetectorRef.detectChanges();
return ref;
}
onClick() {
// do something
}
}
Run Code Online (Sandbox Code Playgroud)
子
@Component({
selector: 'app-sub'
})
export class SubComponent {
@Input('data') someData: string;
@Output('onClick') onClick = new EventEmitter();
}
Run Code Online (Sandbox Code Playgroud) 我在Ember有一个主/详细视图.如果我直接调用详细信息页面,详细信息页面的模型钩子需要来自父(主)的模型(数据).调用详细模型钩子 - 获取/调用模型的正确方法是什么,因此详细信息钩子中的modelFor函数可以工作.
路由器:
App.Router.map(function(){
this.resource('index', { path: '/' } );
this.resource('devices', { path: '/devices'}, function() {
this.resource('device', { path: ':imei'});
});
});
Run Code Online (Sandbox Code Playgroud)
主路线:
App.DevicesIndexRoute = Ember.Route.extend({
model: function() {
var self = this;
return requestController.get({
url: "foo/bar/",
success: function(data) {
console.log(data);
return data;
},
error: function() {
console.log("error");
return [];
}
});
}
});
Run Code Online (Sandbox Code Playgroud)
细节路线:
App.DeviceRoute = Ember.Route.extend({
model: function(args) {
////// Gets Called - needs data from master!!
var model = this.modelFor('devices.index').findBy('imei', args.imei);
return model;
}
});
Run Code Online (Sandbox Code Playgroud)
感谢帮助