我有一个有角度的2 webpack项目,我目前有一些功能在几个组件中重复.我想从"master"类OR组件(无论哪种方法)继承所有这些组件,以便能够从我需要它们的所有组件中调用我的函数.
例如,如果我在3个不同的组件中有一个函数foo:
foo(s: string){
console.log(s);
}
我希望您将此函数移动到另一个文件/类/组件:
class parent{
foo(s: string){
console.log(s);
}
}
并且从某个给定的组件调用我的foo函数.例如:
class child{
constructor(){
foo("Hello");
}
}
我如何使用Angular 2/Typescript做到这一点？
当我们将一个model子组件传递给子组件并对其进行修改时,这些值只会反映在子组件的局部变量中,而不能用于父组件.我们可以通过引用从父到子传递值.所以这些变化也是可见的.
我observable在服务层使用a实现了相同的功能.但我们不能通过参考传递@Input吗？
我有一个组件ComponentA,显示元素列表.此列表在此期间被列入ngOnInit.
我有另一个组件ComponentB提供可能影响ComponentA中显示的元素列表的控件.EG可以添加元素.
我需要一种方法来触发ComponentA的重新启动.
有人有想法吗？
细节
A是一个HeaderBar,其菜单显示"savedSearchs"列表
@Component({
selector: 'header-bar',
templateUrl: 'app/headerBar/headerBar.html'
})
export class HeaderBarComponent implements OnInit{
...
ngOnInit() {
// init list of savedSearches
...
}
}
B是一个可以保存搜索的SearchComponent
@Component({
selector: 'search',
templateUrl: 'app/search/search.html'
})
export class SearchComponent implements OnInit {
...
}
我试图找出如何访问selector我们传递给 @Component装饰器的内容.
例如
@Component({
selector: 'my-component'
})
class MyComponent {
constructor() {
// I was hoping for something like the following but it doesn't exist
this.component.selector // my-component
}
}
最后,我想使用它来创建一个自动添加属性的指令,data-tag-name="{this.component.selector}"以便我可以使用Selenium查询通过其选择器可靠地找到我的角度元素.
我没有使用量角器
angular2-directives angular2-components angular2-decorators angular
我正在寻找将已知/已定义组件注入应用程序根目录并将@Input()选项投影到该组件上的最佳方法.
这对于在应用程序主体中创建模态/工具提示等内容是必要的,这样overflow:hidden/ etc不会扭曲位置或完全切断它.
我发现我可以得到它ApplicationRef然后hackily向上遍历并找到ViewContainerRef.
constructor(private applicationRef: ApplicationRef) {
}
getRootViewContainerRef(): ViewContainerRef {
return this.applicationRef['_rootComponents'][0]['_hostElement'].vcRef;
}
一旦我有了,我就可以调用createComponent如下:
appendNextToLocation<T>(componentClass: Type<T>, location: ViewContainerRef): ComponentRef<T> {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
const parentInjector = location.parentInjector;
return location.createComponent(componentFactory, location.length, parentInjector);
}
但现在我已经创建了组件,但我的所有Input属性都没有完成.为了实现这一点,我必须手动遍历我的选项并在appendNextToLocation实例的结果上设置如下:
const props = Object.getOwnPropertyNames(options);
for(const prop of props) {
component.instance[prop] = options[prop];
}
现在我意识到你可以做一些DI来注入选项,但这使得它在尝试用作普通组件时不可重复使用.这是什么看起来像参考:
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(ComponentClass);
let parentInjector = location.parentInjector;
let providers = ReflectiveInjector.resolve([
{ …我正在做什么:
Plnkr示例 - > 在此处输入链接描述
在该示例中,您将看到"AddItem"方法
addItem(componentName:string):void{
let compFactory: ComponentFactory;
switch(componentName){
case "image":
compFactory = this.compFactoryResolver.resolveComponentFactory(PictureBoxWidget);
break;
case "text":
compFactory = this.compFactoryResolver.resolveComponentFactory(TextBoxWidget);
break;
}
//How can I resolve a component based on string
//so I don't need to hard cost list of possible options
this.container.createComponent(compFactory);
}
"compFactoryResolver:ComponentFactoryResolver"在构造函数中注入.
正如您将注意到的,必须对switch语句中的每个排列进行硬编码都不太理想.
将ComponentFactoryResolver记录到控制台时,我发现它包含一个包含各种工厂的Map.
CodegenComponentFactoryResolver {_parent: AppModuleInjector, _factories: Map}
但是,这张地图是私人的,无法轻易访问(据我所知).
有没有更好的解决方案然后以某种方式滚动我自己的类来访问这个工厂列表？
我看过很多关于人们试图创建动态组件的消息.但是,这些通常是在运行时创建组件.这里讨论的组件已经预先定义,我试图使用字符串作为键来访问工厂.
任何建议或建议都非常感谢.
非常感谢你.
我们如何在Angular(版本2.x及更高版本)中获取DOM元素？addClass,removeClass等基本函数在打字稿中是不可用的,那么我们如何在角度组件中进行这些DOM操作呢？请建议是否有.TIA
我有ParentComponent和ChildComponent,我需要将ParentComponent中的ngModel传递给ChildComponent.
// the below is in ParentComponent template
<child-component [(ngModel)]="valueInParentComponent"></child-component>
如何在ChildComponent中获取ngModel的值并进行操作？
我一直在研究Angular 2 API ComponentResolver以及DynamicComponentResolver创建动态组件,但我有一些不同于那些API提供的东西.
在NG2中是否有任何方法可以基于其类名字符串创建组件？
例如,我正在构建一个可配置的图表仪表板.每个用户的布局都存储在数据库中,说明他们需要2x折线图,3x条形图等.
当我将这些数据加载为json时,它看起来像:
user.charts = [
{ type: 'LineChartComponent', position: ... }
{ type: 'BarChartComponent', position: ... }
];
type我想要反射创建的组件的类名在哪里.
到目前为止,我有以下内容:
this.chartMap = {
'LineChartComponent': LineChartComponent
};
let config = this.configuration;
let chartComponentType = this.chartMap[config.type];
let factory = this.componentFactory.resolveComponentFactory(chartComponentType);
let component = factory.create(this.injector);
component.instance.configuration = config;
this.chartContainer.insert(component.hostView);
但整个想法是消除对的需要chartMap.如何在不引用类型的情况下基于字符串反射性地创建此类？
我有大量数据要显示在屏幕上。我需要提供一个简化的列表，以便用户可以选择其中一个项目并查看其详细信息。
所以想象我有一个组件 SimpleListComponent，它将保存数据并呈现一个简化的视图
export class SimpleListComponent{
@Input() data: any[];
}
html
<ul>
<li *ngFor="let item of data">
<a>{{item.name}}</a>
</li>
</ul>
用户应该能够单击其中一个项目并在新选项卡中打开包含该项目详细信息的视图。所以如果我有第二个组件
export class DetailedViewComponent{
@Input() item: any;
}
<div>
<!--All fields of item here-->
</div>
编辑：这里的问题是我从一个非常定制的搜索中呈现数据，所以我没有一个 ID 来从服务器获取详细信息或以任何其他方式再次获取数据。所以唯一的方法就是以某种方式传递已经加载的数据。
我怎样才能在角度上实现这一目标？将项目数据提供给第二个组件并在新选项卡中打开它？