标签: angular2-components
通用类型'ComponentRef <C>'需要1个类型的参数
无法去除ionic-2中的动态组件.在打字稿时,它会说异常
"通用类型'ComponentRef'需要1个类型的参数".
此外,在不使用ionic2的情况下使用相同的代码.非常感谢你的帮助.提前致谢.
class DynamicCmp {
_ref: ComponentRef;
_idx: number;
constructor(private resolver: ComponentResolver, private location: ViewContainerRef) { }
remove() {
this._ref.destroy();
}
add1() {
this.resolver.resolveComponent(DynamicCmp).then((factory: ComponentFactory<any>) => {
let ref = this.location.createComponent(factory, 0);
ref.instance._ref = ref;
ref.instance._idx = this._idx++;
});
}
}
例外:TypeScript错误:....../home/home.ts(9,11):错误TS2314:通用类型'ComponentRef'需要1个类型的参数.
推荐指数
解决办法
查看次数
Angular 2使用组件属性动态设置routerLink
我创建了一个组件,其中包含一个带有routerLink属性的元素,我想从使用该组件的模板中设置该属性.当我尝试这样做时,我收到错误消息'无法读取属性'未定义'的路径'.
我的组件看起来链接这个:
INFO-box.component.ts
import { Input, Component } from "@angular/core";
import { ROUTER_DIRECTIVES } from "@angular/router";
@Component({
selector: "info-box",
template: require("./info-box.component.html"),
directives: [
ROUTER_DIRECTIVES
]
})
export class InfoBoxComponent {
@Input() routerLink: string;
@Input() imageUrl: string;
}
INFO-box.component.html
<a [routerLink]="[routerLink]">
<img src="{{imageUrl}}" width="304" height="236">
</a>
并且使用组件的模板看起来像这样:
<info-box [routerLink]="['/test']" [imageUrl]="['./testimage.jpg']"
如果我不添加routerLink一切正常.我的路由器配置似乎是正确的,因为当我直接添加到我的模板时,它也可以正常工作.谁能帮我这个？
Grt Marco
javascript angular2-template angular2-routing angular2-components angular
推荐指数
解决办法
查看次数
可以为动态创建的组件触发输出事件
我正在做的事情:
- 动态创建组件(完成)
- 允许动态创建的组件利用"输出",以便父组件可以侦听子组件的更改.
这是我正在尝试做的一个Plnkr.Plnker - > https://plnkr.co/edit/XpDCGIwd2at9oR74lpY5?p=preview
当用户单击"+组件"时,以下内容将创建组件
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
let ref = this.container.createComponent(componentFactory);
在添加的每个子组件中,当用户单击"Fire Event"时
<span class="initiateParentAction"
(click)="fireEventEmitter()" [class.eventFired]="eventFired==true">Fire Output Event: {{eventFired}}</span>
它称之为以下
fireEventEmitter(){
console.log("Event Fired");
this.parentActionReq.emit({
action: "helloWorld"
});
this.eventFired = true;
setTimeout(() => this.eventFired=false, 2000);
}
父组件(在本例中为"App"组件)正在侦听这些输出,如此处所示
<ng-container #container
(parentActionReq)="childActionInitiated($event)"></ng-container>
我无法从动态创建的组件中获取事件以向父级注册.在Plnker中,"Received child output Event"应该变为true.
在这一点上,我认为由于这些组件是在运行时添加的,我需要以某种方式重新初始化事件检测OnInit.但没有取得进展.
任何建议,提示,指导将在这里表示赞赏.
我对于创建我自己的Observables的道路犹豫不决,因为这似乎是重新创建了轮子,输出完全符合我的目的.
非常感谢你.
推荐指数
解决办法
查看次数
Angular 2标头组件标题根据状态动态变化
我有一个使用角度2的设计,其中所有其他组件加载的标题组件,导航栏组件和主体组件.如下图所示
- 头
- 导航
- 其他组件加载的位置(此部分可能具有嵌套组件/子组件)
所以基本上,在标题组件中,我想显示当前状态.并且在当前状态的底部,我想显示用户的先前状态.
问题:为了实现这一点,我在角度中使用了组件交互技术.
重新加载应用后,它会显示当前和
后退状态的默认值.在用户直接登陆到正文中的子组件的特定页面的场景中,它显示当前和后退状态的默认值.
由于angular遵循组件架构,因此我想要一种更好的方法来实现此功能.
如果我直接进入图片中第3部分的子组件,我的标题组件应根据标题组件中的特定页面获取标题/当前状态.
当ngOnInit I传递当前状态值时,我的解决方案是在每个组件中.我也解析以前的状态值.因此,标头组件显示它,因为服务是使用此链接中的技术编写的 - https://angular.io/docs/ts/latest/cookbook/component-communication.html
但是有些情况下我从服务器获取数据并且必须更新标头当前状态.在那里,我看到根本没有显示.
需要帮助以获得良好的解决方案
PS - 由于这种机制在不同的文件中,并且有点复杂,我无法更新代码模板
angular2-routing angular2-services ngcomponentrouter angular2-components angular
推荐指数
解决办法
查看次数
在index.html中不显示Angular 2组件
我对Angular 2很新,所以请耐心等待.我试图让一个新组件出现在index.html页面中.文件集来自GitHub的基本快速启动文件.我创建了一个新组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-user-item',
template: `<h1>It works!</h1>`,
})
export class UserItemComponent {
}
我已经在HTML中声明了选择器标签:
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
<app-user-item>loading another component</app-user-item>
</body>
</html>
我甚至尝试将导入到app.module.ts和组件名称的顶部添加到app.module.ts中的声明数组.但仍然没有.我检查了我的文件结构,并有一个js版本的user-item.component.ts.但我看不出变化.
任何帮助,将不胜感激.
干杯
推荐指数
解决办法
查看次数
如何在飞镖项目中使用用打字稿编写的 angular 2 组件
我正在使用 dart 开发一个 angular 2 项目。我看到了一些用 typescript 编写的有趣的组件库，我想在我的应用程序中使用它们。是否可以？如果是，如何？我用谷歌搜索了很多，但我找不到任何提示......
推荐指数
解决办法
查看次数
在Angular2的指令或组件中将@HostBinding和@HostListener作为条件
我有一个接受事件的指令：
<td calendarEvent [event]=event><td>
在指令中，我具有HostBinding用于根据事件添加类的，以及HostListener用于侦听mouseenter和mouseleave事件的。例如：
@HostBinding('class.all-day') get eventIsAllDay() {
if (this.event) return this.event.is_all_day;
}
许多<td>旨意具有undefined的[event]输入。有没有一种方式HostBinding，并HostListener根据条件将被添加？在每次更改检测中，它都必须为每个<td>标签运行所有绑定和侦听器，即使没有事件也是如此。也许所需的计算能力可以忽略不计，但是我敢肯定一点点帮助，特别是对于移动设备。
推荐指数
解决办法
查看次数
Angular2 模板表达式在更改检测时为每个组件调用两次
相当标准的情况。
有一个父组件<item-list>。在其模板内*ngFor生成了 20 个子组件<item-block>。[ngStyle]使用调用 function 的指令和模板表达式设置子组件样式setStyles()。
问题（或可能不是）是，当在一个特定子元素上发出任何事件时，表达式setStyles()会对每个子组件执行两次。
因此，如果我们单击示例中的一个特定项目，并且我们有 20 个<item-block>组件 -setStyles()将执行 20+20 次。
问题是：
- 为什么会发生这种情况以及这是预期的行为吗？
- 它如何影响性能
- 如何避免这种情况 - 每个子组件/检测更改仅调用一次。
示例&plnkr：
import {Component} from '@angular/core'
@Component({
selector: 'item-list',
template: `
<item-block
[item]="item"
*ngFor="let item of items"
></item-block>
`,
})
export class ItemListComponent {
items: any[] = [];
constructor() {}
ngOnInit() {
// generate dummy empty items
for (let i = …angular2-template angular2-changedetection angular2-components angular
推荐指数
解决办法
查看次数
Angular 2 Chrome DOM渲染问题
我们的团队(不仅是我的电脑)对Angular 2有一个奇怪的渲染问题,这只发生在Chrome中.
也就是说,在应用程序导航或在应用程序中期刷新时,DOM中的许多项目都是不可见的.例如.其中包含文本的段落和标题,但不为最终用户呈现文本,但文本在检查器DOM中可见.
如果在检查器中编辑随机CSS属性,DOM将重新获得可见性.这个CSS甚至不必适用于手头的隐形DOM项目,ala.不可见的项目可以是标题中的一个段落,并且打开/关闭随机页脚跨度的顶部位置将使标题段落重新获得可见性.
在切换随机CSS元素之前
切换随机CSS元素后
这种情况发生在应用了固定加载程序的页面上,例如.具有固定位置,超高z指数并包含整个屏幕的组件.显示此页面加载器直到ngOnInit完成,这意味着它在大多数情况下都非常快.禁用此加载程序似乎解决了这个问题.
当页面加载后加载var值时,有时会在{{var}}标记中发生这种情况.
我们尝试用任何一个切换装载机
*ngIf="true/false"
要么
[style.display]="block/none"
这些解决方案都不起作用,一些dom仍然是看不见的.
有没有人知道为什么会这样？
google-chrome angular2-template angular2-changedetection angular2-components angular
推荐指数
解决办法
查看次数
如何在从指令创建组件实例时等待 ngAfterViewInit() 运行？
我有一个指令，它在代码中创建一个他使用的组件模板实例并设置它的innerHTml，这将改变模板维度：
var factory = this.resolver.resolveComponentFactory(MyComponentTemplate);
this.templateComponent = this.viewContainerRef.createComponent(factory);
this.templateComponent.instance.htmlStr = anyText;
现在，问题来了。在这个阶段，我将获得未定义的组件尺寸：
console.log(this.templateComponent.instance.width); //undefined
console.log(this.templateComponent.instance.height); //undefined
在调试中，我注意到只有在我的组件运行ngAfterViewInit()之后，我才能从指令中读取组件模板的宽度和高度并使用该值。
有没有一种方法可以告诉我的指令等到ngAfterViewInit()结束，然后用我正在寻找的信息从指令中执行我需要的操作。
推荐指数
解决办法
查看次数