我有一个组件从服务器获取项目列表,然后使用模板中的*ngFor显示该列表.
我希望列表显示一些动画,但一个接一个.我的意思是每个列表项应该在其他之后动画.
我正在尝试这样的事情:
import { Component, Input, trigger, state, animate, transition, style } from '@angular/core';
@Component({
selector: 'list-item',
template: ` <li @flyInOut="'in'">{{item}}</li>`,
animations: [
trigger('flyInOut', [
state('in', style({ transform: 'translateX(0)' })),
transition('void => *', [
style({ transform: 'translateX(-100%)' }),
animate(100)
]),
transition('* => void', [
animate(100, style({ transform: 'translateX(100%)' }))
])
])
]
})
export class ListItemComponent {
@Input() item: any;
}
在我的列表组件模板中我使用它像:
<ul>
<li *ngFor="let item of list;">
<list-item [item]="item"></list-item>
</li>
</ul>
它的作用是立即显示整个列表.我希望项目一个接一个地输入一些动画.
我正在开发一个用angular 4开发的管理面板,并试图集成一个部分来自定义样式,如更改颜色,bg等.我已经开发了一个部分来保存数据库中的设置,使用API将它们作为json加载到json.
现在我尝试使用json中的值生成动态css,我尝试使用主要组件中的以下代码,但它无法正常工作
@Component({
templateUrl: 'card.html',
styles: [`
.card {
height: 70px;
width: 100px;
color: {{css.cardColor}};
}
`],
})
我不确定如何在组件中加载css值并在样式标记中使用它们.我没有找到任何其他解决方案.
另一种方法是使用角度动画概念,但css将是巨大的,并且不可能使用触发器和所有的角度动画来实现它.我相信有一个解决方案,因为它似乎是一个真正的要求,应该由许多其他开发人员完成.
任何帮助都很明显.
编辑:不能使用ngStyle作为几乎所有元素应用于整个应用程序,而不仅仅是特定元素.
如果某个表达式为true,我试图在组件上设置属性.有人能举个例子吗？
我现在拥有的:
<div [danger]="inArray(choice.likers, user, id)"></div>
但这不编译.
inArray是我自己的方法,返回true或false.我想看到的是,如果表达式返回true,则输出将为
<div danger></div>
在角度1中有这样的:ng-attr -...声明完全如上所述.
有人可以请教我如何读取/绑定属性值到@component类,这似乎是在ngOnInit方法中未定义？
这是一个有趣的演示:http://plnkr.co/edit/4FoFNBFsOEvvOkyfn0lw？p = preview
我想读取"someattribute"属性的值
<my-app [someattribute]="'somevalue'">
在App类(src/app.ts)ngOninit方法中.
谢谢!
我试图找到一种在Angular2中动态构建模板的方法.我在想templateRef可能会提供一种方法来做到这一点.但我可能是错的.
我在这个例子中看着templateRef.我注意到语法是[ng-for-template]我也尝试过[ngForTemplate]因为我知道最近发生了变化.
所以此刻我有这个:
import {Component, TemplateRef} from 'angular2/core';
@Component({
selector : 'body',
template : `
<template [ngForTemplate]="container">
<div class="container"></div>
</template>
`
})
export class App
{
@ContentChild(TemplateRef) container;
constructor() {}
ngAfterContentInit()
{
console.log(this);
}
}
此示例引发错误:
import {Component, TemplateRef} from 'angular2/core';
@Component({
selector : 'body',
template : `
<template [ngForTemplate]="container">
<div class="container"></div>
</template>
`
})
export class App
{
@ContentChild(TemplateRef) container;
constructor() {}
ngAfterContentInit()
{
console.log(this);
}
}
所以首先我想知道.这样做的正确方法是什么？文档没有提供任何示例.
其次,有没有一种方法可以将新的模板逻辑添加到我的模板或动态构建模板？应用的结构可以是非常大量的不同结构组合.所以,如果可能的话,我想看看是否有一种方法可以做到这一点,而不需要一个包含大量不同ngIf和ngSwitch语句的庞大模板.
我的问题实际上是关于templateRef的第一部分.但是对第二部分的任何帮助或建议表示赞赏.
我面临着问题formGroup.首先基于URL我采取一些价值并调用API来检索前场文本的特定用户数据.
register.html
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-4 ">Username</label>
<div class="col-sm-8">
<input [formControl]="email" type="text" class="form-control" id="inputEmail3" placeholder="Email Address" [readonly]="isReadOnly">
</div>
</div>
</form>
register.component.ts
import { Component } from '@angular/core';
import { FormGroup, AbstractControl, FormBuilder, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { EmailValidator, EqualPasswordsValidator } from '../../theme/validators';
@Component({
selector: 'register',
templateUrl: './register.html',
})
export class Register {
public form: FormGroup;
public email: AbstractControl;
public username: string;
constructor(private registerService: RegisterService, …javascript angular2-forms angular2-template angular2-routing angular
我试图使用角度为2的ngControl值来验证输入字段.我需要验证用户始终以大写形式输入值.
现在我们需要将用户输入的值转换为大写.但是我使用ngControl处理输入字段中的值,而不是ngModel(考虑到我可以使用ngModelChange事件将值更新为大写.)
那么转换ngControl使用的值的最佳和低成本方法是什么？
所以这是交易.我有一个非常好的组件,并在很多地方使用.现在我需要使用相同的组件,但希望根据条件呈现不同的模板.
我尝试了很多.
1)尝试使用多个组件装饰器 - 没有运气
2)尝试了多层次的抽象,我最终创造了更多的组件 - 糟糕的主意
3)可以逐字复制整个组件,只需更改选择器和模板 - 坏主意
4)目前我正在尝试这个:
<div *ngIf="!isWizard">
<ul class="nav" role="tablist">
<ng-content select="tab-link"></ng-content>
</ul>
<ng-content select="tab-content"></ng-content>
</div>
<div *ngIf="isWizard">
<nav class="nav-panel sidenav">
<ng-content select=".wizard-title"></ng-content>
<ul class="nav" role="tablist">
<ng-content select="tab-link"></ng-content>
</ul>
</nav>
<main class="settings-panel content-area">
<ng-content select="tab-content"></ng-content>
</main>
</div>
我将isWizard属性设置为true/false.现在的问题是,ng-content只运行一次.因此,当isWizard为true时,即使显示div块,ng-content也不会运行(导致它在上面的块中运行).
5)而不是使用ngIf我也尝试过ngSwitch - 没有用
我现在很绝望.请帮忙 :)
哦angular2 ......为什么这么难？
<input type="text" formControlName="exposure" type="hidden">
<label>{{exposure}}</label>
如果我在输入中使用formControlName,则值是正确的.
如何获取模板中的曝光值？它在标签上是空白的
我正在使用Angular 2,并希望使用htm ngif coniditon检查变量值是否在角度中未定义
如果我使用<span*ngIf ="!testvar">
它还涵盖了变量testvar = 0时的情况,但我想排除它为0时的情况
以下作品,但这些是2个检查:
<span *ngIf="!testvar && testvarl != 0"></span>
我想检查这个案例,只是为了缩短它并使其更清洁.有一个简单的方法吗？