我有一个父组件:
<parent></parent>
我想用子组件填充这个组:
<parent>
<child></child>
<child></child>
<child></child>
</parent>
父模板:
<div class="parent">
<!-- Children goes here -->
<ng-content></ng-content>
</div>
儿童模板:
<div class="child">Test</div>
由于parent和child是两个单独的组件,他们的风格被锁定在他们自己的范围.
在我的父组件中,我尝试过:
.parent .child {
// Styles for child
}
但.child样式没有应用于child组件.
我尝试使用styleUrls将parent样式表包含在child组件中以解决范围问题:
// child.component.ts
styleUrls: [
'./parent.component.css',
'./child.component.css',
]
但这并没有帮助,也尝试了另一种方式,即取出child样式表,parent但这也无济于事.
那么如何设置包含在父组件中的子组件的样式？
我需要在ngClass表达式中插入一个值,但我不能让它工作.
我试过这些解决方案,这是唯一对我有意义的解决方案,这两个解决方案都失败了:
<button [ngClass]="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>
<button [ngClass]="{namespace + '-mybutton': type === 'mybutton'}"></button>
这个与插值一起使用但是由于整个字符串被添加为类而失败了动态添加的类:
<button ngClass="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>
所以我的问题是你如何使用这样的动态类名ngClass？
我有使用模板驱动蓝图的表单,所以像这样:
<form #myForm="ngForm" ngSubmit="save(myForm.value, myForm.isValid)">
<input #name="ngModel" [(ngModel)]="name">
<button type="submit">Submit form</button>
</form>
现在,我如何阻止ENTER提交表单？它会干扰表单内部的自定义ENTER行为,如果您不小心在输入中按Enter键,这是不需要的.
我环顾四周,找到了一些古老的Angular 1答案,还有一些标准的JavaScript答案,但我觉得Angular 2必须有这样的东西已经内置,但我还是找不到它.
如果他们不这样做,最好的方法是什么？
我在我的core组件中有这个功能:
isValid(value: any) {
// Do some stuff and return something based on the result
return false;
}
我传到other-component这样的:
<other-component (onBeforeAdding)="isValid($event)"></other-component>
并且other-component我得到了这个EventEmitter函数,该函数应该在其他事情之前运行并返回一个值,表明值是否有效:
@Output() onBeforeAdding: EventEmitter<any> = new EventEmitter();
let isValid = this.onBeforeAdding.emit(value) || true;
if (isValid) {
// Do stuff
}
这里的问题是EventEmitter函数不能返回一个值,因为它是异步的(虽然从rc2来看,这似乎是可选的,通过将true传递给new EventEmitter函数？即使这样做也不会解决这个问题).所以,isValid永远是真实的,无论该函数返回什么.
如何从EventEmitter函数中返回值？
是否可以将样式表中的URL动态注入组件？
就像是:
styleUrls: [
'stylesheet1.css',
this.additionalUrls
]
或(一厢情愿并注意这只是假代码):
export class MyComponent implements dynamicUrls {
ngDynamicUrls() {
this.inject(['anotherStylesheet.css', 'anotherStylesheet2.css']);
}
}
因为如果你能够在stylesheet1没有访问权限的情况下覆盖某些样式,你应该怎么做呢？我唯一的想法是以styleUrls某种方式拥有动态,但我认为这甚至不可能从我能找到的东西.
有任何想法吗？
我有一个自定义选择组件,当你点击一个li项目时设置模型,但由于我this.modelChange.next(this.model)每次更改模型时手动调用它都是非常混乱和可重复的,我想避免.
所以我的问题是,如果$scope.$watch值发生变化,那么我可以观察到类似的内容,然后在this.modelChange.next(this.model)每次发生时调用.
我一直在阅读Observables但我无法弄清楚这应该如何用于一个简单的值,因为我看到的所有示例都是对外部api的异步请求.
当然必须有一种更简单的方法来实现这一目标吗？
(不是我不能使用,ngModelChanges因为我实际上并没有使用输入).
import {Component, Input, Output, EventEmitter, OnInit, OnChanges} from 'angular2/core';
@Component({
selector: 'form-select',
templateUrl: './app/assets/scripts/modules/form-controls/form-select/form-select.component.html',
styleUrls: ['./app/assets/scripts/modules/form-controls/form-select/form-select.component.css'],
inputs: [
'options',
'callback',
'model',
'label'
]
})
export class FormSelectComponent implements OnInit, OnChanges {
@Input() model: any;
@Output() modelChange: EventEmitter = new EventEmitter();
public isOpen: boolean = false;
ngOnInit() {
if (!this.model) {
this.model = {};
}
for (var option of this.options) {
if (option.model == …我试图ng-repeat在一个div应该包含星形图像的地方使用,JSON中的每个饼都有rating1-5 的属性,我想用这个值来圈出x个星星.我有点工作,但它的方式存在缺陷,我无法对数组进行重新排序,并使星星跟随列表中的正确项目,因为我[$index]用来跟踪迭代.
我的解决方案也相当丑陋,因为我创建的数组具有与rating属性值一样多的索引占位符,然后将其推入数组以循环出适当数量的图像.我想有一个更优雅的解决方案.
如何在不使用的情况下解决这个问题[$index]？
JSON的片段:
{"pies": [
...
{
"name": "Blueberry pie",
"imageUrl": "img/blueberrypie.png",
"id": "1",
"rating": "5", //Ng-repeat depending on this value
"description": "Blueberry pie is amazing."
},
...
]}
我的控制器:
pieShopApp.controller('shopCtrl', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
$scope.pieId = $routeParams.pieId,
$scope.sortingOptions = ['A-Z', 'Rating'],
$scope.sortingValues = ['name', 'rating'],
$scope.ratings = [],
$http.get('jsons/pies.json')
.success(function(data, status) {
$scope.pies = data;
for (i = 0; i < …首先我创建了一个User类:
export class User {
name: string;
email: string;
}
然后我得到了我CoreComponent使用的FormInputComponent以及public user从User类创建一个:
import {Component} from 'angular2/core';
import {FormInputComponent} from '../form-controls/form-input/form-input.component';
import {User} from '../core/user';
@Component({
selector: 'core-app',
templateUrl: './app/assets/scripts/modules/core/core.component.html',
styleUrls: ['./app/assets/scripts/modules/core/core.component.css'],
directives: [FormInputComponent]
})
export class CoreComponent {
public user: User = {
name: '',
email: ''
}
}
然后我创建了一个输入组件,它是一个可重用的输入组件,它将模型值作为输入,当进行更改时,导出新值,以便CoreComponent可以使用新值更新模型:
import {Component, Input, Output, EventEmitter, DoCheck} from 'angular2/core';
@Component({
selector: 'form-input',
templateUrl: './app/assets/scripts/modules/form-controls/form-input/form-input.component.html',
styleUrls: ['./app/assets/scripts/modules/form-controls/form-input/form-input.component.css'],
inputs: [
'model', …在Angular 1中,所有DOM操作都应该在指令中完成,以确保适当的可测试性,但是Angular 2呢？这怎么改变了？
我一直在寻找好的文章或任何关于DOM操作的位置以及在做这些操作时如何思考的信息,但我每次都是空的.
以这个组件为例(这实际上是一个指令,但让我们假装它不是):
export class MyComponent {
constructor(private _elementRef: ElementRef) {
this.setHeight();
window.addEventListener('resize', (e) => {
this.setHeight();
});
}
setHeight() {
this._elementRef.nativeElement.style.height = this.getHeight() + 'px';
}
getHeight() {
return window.innerHeight;
}
}
例如,事件绑定是否属于构造函数,还是应该放在ngAfterViewInit函数中还是其他地方？您是否应该尝试将组件的DOM操作分解为指令？
这一切都只是一个模糊,所以我不确定我是否正确,我相信我不是唯一的.
Angular2中DOM操作的规则是什么？
我正在尝试创建一个组件,您可以在其中传递应该用于组件内的列表的管道.从我通过测试和寻找答案找到的,唯一的解决方案似乎创建类似于:
<my-component myFilter="sortByProperty"></my-component>
my-component 模板:
<li *ngFor="#item of list | getPipe:myFilter"></li>
然后映射myFilter到正确的管道逻辑并运行它,但这看起来有点脏,不是最佳的.
我认为他们会提出一个更好的解决方案来解决这个问题,因为Angular 1你也会沿着这些方向做一些事情.
在Angular 2中没有更好的方法吗？