我创建了以下简单的示例组件,它使用@Component装饰器的host属性向组件DOM元素添加一些属性和侦听器.在我的情况下[ngClass]没有效果.有人知道为什么以及如何解决它？
import {Injector, Component} from "angular2/core";
import {NgClass} from "angular2/common";
import {SelectionService} from "../selection-service"
@Component({
selector: 'my-component',
template: `<div>inner template</div>`,
host: {
'style': 'background-color: yellow', // works
'[ngClass]': "{'selected': isSelected}", // does not work
'(mouseover)': 'mouseOver($event)', // works
'(mouseleave)': 'mouseLeave($event)' // works
},
directives: [NgClass]
})
export class MyComponent {
private isSelected = false;
constructor(private selectionService:SelectionService) {
this.selectionService.select$.subscribe((sel:Selection) => {
this.isSelected = sel; // has no effect on ngClass
});
}
mouseOver($event) {
console.log('mouseOver works');
}
mouseLeave($event) {
console.log('mouseLeave works'); …更新:
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: …使用Angularjs 1.x,您可以轻松地在编辑/读取模式之间的按钮单击上切换html模板.ng-include指令是关键.
<table>
<thead>
<th>Name</th>
<th>Age</th>
<th></th>
</thead>
<tbody>
<tr ng-repeat="contact in model.contacts" ng-include="getTemplate(contact)">
</tr>
</tbody>
</table>
get getTemplate函数执行以下代码:
$scope.getTemplate = function (contact) {
if (contact.id === $scope.model.selected.id) return 'edit';
else return 'display';
};
这再次导致其中一个模板在UI中处于活动状态:
显示
<script type="text/ng-template" id="display">
<td>{{contact.name}}</td>
<td>{{contact.age}}</td>
<td>
<button ng-click="editContact(contact)">Edit</button>
</td>
</script>
编辑
<script type="text/ng-template" id="edit">
<td><input type="text" ng-model="model.selected.name" /></td>
<td><input type="text" ng-model="model.selected.age" /></td>
<td>
<button ng-click="saveContact($index)">Save</button>
<button ng-click="reset()">Cancel</button>
</td>
</script>
https://jsfiddle.net/benfosterdev/UWLFJ/
对于Angular 2 RC 4,不存在n-include.
如何使用Angular 2 RC4进行相同的功能？
我正在使用Angular 2(更改)来检测上传的文件并触发该功能.但是当我尝试再次上传同一个文件时,我遇到了问题,因为文件没有变化,(触发)没有变化.在这种情况下,请建议事件绑定.
<input type="file" name="file" id="fileupload" (change)="onChange($event)"/>
有没有办法将类型文件的输入值重置为空.
刚升级到Angular 2.1.我有一个@input值,我试图传递一个数组.一旦我将*ngIf放入模板中,我就会得到解析错误？如果我打印输入值我得到:// [对象对象],[对象对象],[对象对象].为什么这会影响*ngIf？
<div *ngIf="< my value "></div>
- error zone.js？fad3:388未处理的Promise拒绝:模板解析错误:无法绑定到'ngIf',因为它不是'div'的已知属性.("
我想在模态视图中从我的html输入标签中获取文件名,并使用Angular2保存它.有人能帮我吗？
我有一个使用Angular-CLI创建的简单应用程序,我想重构并将app.component.ts代码移动到单独的组件文件中并开始出现一个令人讨厌的错误:
找不到模块:错误:无法解析'./sb/sb.component.html'(我的SBComponent).在下面
这就是我所拥有的:
app.module:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { SBComponent } from './sb/sb.component'
@NgModule({
declarations: [
AppComponent, SBComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component:
import { Component } from '@angular/core';
import { NgModule,ElementRef, ViewChild, AfterViewInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser' …我显示的秒数从3600减少到0.
<div class="time-box" *ngIf="p.value.playerTimer > 0">{{ p.value.playerTimer }}</div>
我想将秒数格式化为分钟:秒
我希望能够使用DatePipe - https://angular.io/api/common/DatePipe
<div class="time-box" *ngIf="p.value.playerTimer > 0">{{ p.value.playerTimer | date:'mmss' }}</div>
但这不起作用,因为它预计p.value.playerTimer是一个日期对象或自纪元以来的秒数.
还有另一种方法来实现这一目标吗？
我试图了解如何在a ng-content为空时创建if来显示.
<div #contentWrapper [hidden]="isOpen">
<ng-content ></ng-content>
</div>
<span *ngIf="contentWrapper.childNodes.length == 0">
<p>Display this if ng-content is empty!</p>
</span>
当内容为空时我尝试使用那个显示数据,但即使信息为空也不会显示<span>标签
谢谢,永远感谢你的帮助.
我有一个数组,我可以使用ng-for语法循环.但是,最终我只想访问该数组的单个元素.我无法弄清楚如何做到这一点.
在我的组件脚本中
export class TableComponent {
elements: IElement[];
}
在我的模板中,我能够遍历元素
<ul>
<li *ngFor='let element of elements'>{{element.name}}</li>
</ul>
但是,尝试通过使用分区引用项目来访问元素数组中的项目
x {{elements[0].name}}x
似乎不起作用.
模板中的格式非常明确,因此我希望能够在模板中显式访问数组的每个元素.
我不明白基本的东西......