我想要一个由标签和文本框组成的模板.此模板可以在我的页面中的不同位置重复使用.要做到这一点,我已经创建了一个MyTextComponent.我想知道如何将不同的值绑定到组件输入.
例如:
MyTextComponent
import {Component, Input} from 'angular2/core';
@Component({
selector: 'myText',
template:`<label>{{someLabel}}</label>
<input id=myId type="text" [(ngModel)]=bindModelData>
`
})
export class MyTextComponent {
@Input() myId : string;
@Input() bindModelData: any;
}
MyPageComponent
import {Component} from 'angular2/core';
import {MyTextComponent} from './MyTextComponent.component'
@Component({
template:`<myText myId="id1" bindModelData="myString1"></myText>
<myText myId="id2" bindModelData="myString2"></myText>
`,
directives:[MyTextComponent]
})
export class MyPageComponent{
myString1: string;
myString2: string;
}
如何将MyTextComponent输入的ngModel绑定到MyPageComponent局部变量？
编辑:添加@Output后尝试,但它没有工作:( MyPageComponent中的插值是空白的,以及日志打印未定义.但插值适用于mytextComponent.任何想法
import {Component} from 'angular2/core';
import {MyTextComponent} from './myText.component'
@Component({
template:`<myText myId="id1" [(bindModelData)]="myString1"></myText>
<myText myId="id2" [(bindModelData)]="myString2"></myText>
{{myString1}}
{{myString2}}
<button (click)="clicked()">Click …我正在以角度2构建上传组件,我偶然发现问题.(drop)事件不起作用.这是我的实施
<div
class="input-upload"
*ngIf="status != 'finished'"
(drop)="onDrop($event)"
(dragenter)="dragenter()"
(dragleave)="dragleave()"
(dragover)="dragover()"
[ngClass]="{'drag-over': dragOver | async}"
>
onDrop(event: any) {
event.preventDefault();
event.stopPropagation();
console.log(event)
}
难道我做错了什么？我甚至把不存在的函数放在(drop)事件中,而角度没有给出错误.
我正在尝试创建一个指令,当元素可见时,该指令会慢慢淡化照片.为此,我的第一个想法是比较项目的位置与顶部(也检查窗口的高度).但是我可以找到如何用Angular2做到这一点.
到目前为止这是我的代码:
import {Directive, ElementRef, Renderer} from 'angular2/core';
@Directive({
selector: '[fadeInPhoto]',
host: {
'(window:scroll)': 'onScroll()'
}
})
export class FadeInPhotoDirective{
private scrollTop: number;
private initialClass: string;
constructor(private _el: ElementRef, private _renderer: Renderer){
this.initialClass = 'thumbnail';
}
onScroll(){
console.log('Photo top:', this._el);
}
}
但是this._el似乎没有包含该信息的任何方法或属性.
我在这个项目中使用Angular 2 Material sidenav:
<md-sidenav-layout>
<md-sidenav #start mode="side" [opened]="true">
<md-nav-list>
</md-nav-list>
</md-sidenav>
<button md-button (click)="start.toggle()">Close</button>
<router-outlet></router-outlet>
</md-sidenav-layout>
如何start.toggle()使用click事件从我的组件调用而不是元素？
谢谢你的阅读
当用户点击视频区域本身时,我想以编程方式从TypeScript开始播放HTML视频.
这是我的HTML代码:
<div class="video">
<video controls (click)="toggleVideo()" id="videoPlayer">
<source src="{{videoSource}}" type="video/mp4" />
Browser not supported
</video>
</div>
这是我的TypeScript代码:
@ViewChild('videoPlayer') videoplayer: any;
toggleVideo(event: any) {
this.videoplayer.play();
}
问题是我得到一个错误,表示play()函数未定义/存在.这可能是什么错误？
是否可以从HTML调用组件方法,还是应该创建另一个组件来处理格式？
<div *ngFor="let item of items">
<div class="title">{{ item.Title }}</div>
<p>
callComponentMethodHere({{item}})
</p>
</div>
我正在使用Angular 2,并希望使用htm ngif coniditon检查变量值是否在角度中未定义
如果我使用<span*ngIf ="!testvar">
它还涵盖了变量testvar = 0时的情况,但我想排除它为0时的情况
以下作品,但这些是2个检查:
<span *ngIf="!testvar && testvarl != 0"></span>
我想检查这个案例,只是为了缩短它并使其更清洁.有一个简单的方法吗？
我已经阅读了关于如何确定活动路线的这个问题,但是我还不清楚如何确定一个有参数的活动路线？
现在我这样做:
<a [routerLink]="['/Profile/Feed', {username: username}]"
[ngClass]="{active: getLinkStyle('/profile/john_doe/feed')}">
Feed for {{username}}
</a>
在我的组件内:
getLinkStyle(path:string):boolean {
console.log(this._location.path()); // logs: '/profile/john_doe/feed'
return this._location.path() === path;
}
这将有效,因为我将用户名作为字符串传递.有没有办法通过传递正确的参数？
我知道在Angular2中我可以通过这样做将一个类'red'添加到组件的selector元素:
@Component({
selector: 'selector-el',
host: {
'[class.red]': 'true'
},
...
})
我想知道是否有办法向主机添加动态类,类似于你对NgClass的处理方式(我知道实际上不支持NgClass,我正在寻找可能的解决方案):
@Component({
selector: 'selector-el',
host: {
'[NgClass]': 'colorClass'
},
...
})
...
constructor(){
this.colorClass = 'red';
}
我有这个我通过Id引用的元素:
let infiniteScrollElement = document.getElementById('th-infinite-scroll-tracker');
当浏览器到达元素的底部时我需要监听.
怎么做到这一点？