基本上我正在寻找一种方法来实现Angular 1.x ngInit指令的对应物.
我知道ngOnInit钩子以及它是初始化代码的推荐位置.我认为ngInit指令是一种快速的,声明性的方式来原型化或修复一个通常不应该在编写良好的生产代码中使用的组件(尽管开发人员有权选择对他/她最有利的方法).
在init伪指令中做类似的事情
<p [init]="foo = 1; bar()"><p>
多次评估表达式并导致
模板解析错误:
分析器错误:绑定不能包含分配
错误.
在Angular 1.x中,它可以完成
$parse($attrs.init)($scope)
如何使用Angular 2解析器并可能扩展它来评估foo = 1; bar()组件初始化时的模板表达式？
javascript typescript angular2-directives angular2-template angular
我有一个简单的Angular 2指令,它修改了文本框的输入值.请注意,我正在使用模型驱动的表单方法.
@Directive({
selector: '[appUpperCase]'
})
export class UpperCaseDirective{
constructor(private el: ElementRef, private control : NgControl) {
}
@HostListener('input',['$event']) onEvent($event){
console.log($event);
let upper = this.el.nativeElement.value.toUpperCase();
this.control.valueAccessor.writeValue(upper);
}
}
dom正确更新,但模型会在每次其他击键后更新.看看plnkr
有没有人使用装饰器创建任何样本Angular Directive？我搜索了很多,但是到目前为止所有的开发人员都创建了组件指令.即使是Angular API Review也没有更多关于此的内容.@Directive
假设我有一个包含此模板的组件:
<div class="frame">
<span class="user-defined-text">{{text}}</span>
</div>
<style>
span { font-size: 3em; }
.frame { ... }
</style>
如何合并应用于组件的样式,例如
<custom-component [text]="'Some text'">
<style>custom-component { font-weight: bold; }</style>
所以最终输出"Some text"是粗体还是 3em大小？
更好的是有一种方法来获取主机元素的计算样式,例如,我可以将background-color主机的主机应用于border-color模板中的某个元素吗？
我试图找出如何访问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
更新:
GünterZöchbauer提供了一个非常可接受的答案,完美无缺(谢谢!).但是我仍然有一个问题要检查我所做的是否是获得我所寻求的结果的正确方法.上下文给出了上下文.
我对父视图上的自定义标记的期望是,当*ngIf条件为假时,组件根本不加载(或者可能大部分加载).是否正常,即使它不在DOM中(因为条件为假),它仍然被加载？有没有更好的方法将组件的模板(及其类的逻辑)嵌入到父组件的模板中？
我是Angular 2的新手,到目前为止,我在开发基于Spotify API的小型歌曲曲目元数据应用程序方面非常有趣.
TL; DR:如何仅在其对应的HTML标记(用selector属性定义@Component)时才初始化组件*ngIf="true"？
但我当然面临困难!我有这个组件,TrackDetailComponent在模板中我想包括2个其他组件.单击按钮时,它将从一个内部组件切换到另一个内部组件.
这是模板的样子(注意我现在只开发了两个内部组件之一,所以我使用了占位符而不是第二个):
<div id="view">
<tig-track-info *ngIf="childView == TrackDetailView.InfoView" [track]="track"></tig-track-info>
<p *ngIf="childView == TrackDetailView.LyricsView">Here go the lyrics</p>
</div>
如您所见,我的内部组件(命名TrackInfoComponent)有一个输入参数.以下是该组件的摘录:
@Component({
selector: "tig-track-info",
templateUrl: "app/components/track-info/track-info.component.html",
styleUrls: ["app/components/track-info/track-info.component.css",
"app/shared/animations.css"]
})
export class TrackInfoComponent implements OnInit {
private _trackId: string = null;
@Input()
track: Track = null;
previewAudio: any = null; // The Audio object is not yet defined in TypeScript
albumArtworkLoaded: …由于没有模板,在指令中监听子元素事件的最佳方法是什么？有可能HostListener吗？如果没有,还有其他方法吗？
还有这个类似的问题:如何从Angular2中的父指令监听子事件,但建议的方法不能解决我的问题,因为我的指令和子元素不在同一个模板中(指令在主机上).
干杯!
编辑#1
这就是我目前正在做的事情(必须有更好的方法):
首先注入ElementRef我的指令:
constructor(private elView: ElementRef) {}
然后用jQuery(或普通的JS)绑定:
$(this.elView.nativeElement)
.on('drag', '#childId', this.slide.bind(this))
我有一个组件,我传递模板.在这个组件内部,我想传递上下文,以便我可以显示数据.
@Component({
selector: 'my-component',
providers: [],
template: `
<template [ngTemplateOutlet]="templ" [ngOutletContext]="{isVisible: true}">
</template>
`
})
export class MyElementComponent implements OnInit {
@ContentChild(TemplateRef) templ;
constructor(){}
}
现在在其他组件中使用组件时:
<my-component>
<template>
{{isVisible ? 'yes!' : 'no'}}
</template>
</my-component>
所以在my-component我传递一个模板,该模板在其类的@ContentChild名称中处理templ.
然后,在my-component传递templ给我的模板中ngTemplateOutlet,另外,我正在传递ngOutletContext已isVisible设置为的上下文true.
我们应该yes!在屏幕上看到,但似乎上下文永远不会通过.
我的角度版本:
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
javascript typescript angular2-directives angular2-template angular
我正在尝试构建自己的Modal组件,我可以在整个Angular2应用程序中重用它.我正在考虑不同的方法,我想知道是否有可能创建@Component它也作为@Injectable？我正在考虑这个,因为我想为Modal构建一个模板,并将其保存在一个地方.
谢谢
我正在尝试创建一个Angular 4指令,class="active"当文本字段不为空时,该指令将添加到标签上
<div class="md-form">
<input appMdbInputInit type="text" name="" id="FirstName"
class="form-control" formControlName="firstName">
<label for="FirstName" >First Name</label>
</div>
当textfield不为空时我期望的结果
<div class="md-form">
<input appMdbInputInit type="text" name="" id="FirstName"
class="form-control" formControlName="firstName">
<label class="Active" for="FirstName" >First Name</label>
</div>
我怎样才能做到这一点 ？
非常感谢