学习Angular 2并尝试理解何时应该使用组件输入/输出以及何时应该更好地更新服务属性(如果需要更新,可能附加一个EventEmitter).
我有一个列表,例如,任务,每个列表项显示此列表项的各种信息和选项.此列表的工作方式是只有一个列表项处于活动状态,而活动列表项位于列表顶部.每个列表项的其中一个选项是激活它(如果它尚未激活),但其他组件也可能更改哪个是活动项.
我有一个父task组件,list组件和list-item组件(以及一些其他相关组件),另外我有一个task-service.
主要task组件可以使用list组件(和something-realted组件,使用的许多组件需要知道并可能更改activeItemId),如下所示:
<list [(active-item-id)]=“activeItemId”></list>
<something-related [(active-item-id)]=“activeItemId”></something-related>
在list可以使用组件list-item这种方式(active是一个管道,并就项目的属性):
<list-item *ngFor=“#item of items | active”
(item)=“item”
[(active-item-id)]=“activeItemId”>
</list-item>
但由于我有一个task-service包含各种相关任务,我可以在服务上使用已经存在的activeItemId-property(具有eventemitter),并且所有各种任务组件都可以通过此属性获取信息(并进行更新),而不是通过输入/输出通过各种组件来回"发送"财产.
什么时候才能将服务用于这样的事情,何时适合使用组件的输入/输出？
我希望我的控制器在用户单击表单字段时(表单字段获得焦点时)执行某些操作.我怎样才能做到这一点？看到这个plunker.
这是我的控制器:angular.module('myApp',[])
.controller('AppCtrl', ['$scope',
function($scope) {
$scope.field1 = "Default text";
$scope.focus = false;
$scope.formFieldJustGotFocus = function() {
$scope.focus = true;
// Do all the stuff I need to happen when the form has just gotten focus
}
}
]);
以下是观点:
<body ng-app="myApp" ng-controller="AppCtrl">
<h3>Testing</h3>
<p>I want to perform some action in the controller when a form field gets focus. How can I best achieve this?</p>
<form name="myForm">
<input type="text" name="field1" ng-model="field1">
</form>
<p>Form field has focus: {{focus}}</p>
</body>
我正在使用Bootstrap：在禁用状态下，如何删除表单字段中的背景，边框和不允许使用的指针？在不更改其他表单上禁用字段的情况下...
我尝试了一下，但没有成功（使用AngularJS）：
HTML：
<input type="text" ng-disabled="toggle" ng-class="{'no-extras': toggle}" class="form-control" id="name" placeholder="Name" />
和CSS：
.no-extras {
border: 0;
box-shadow: none;
background-color: white;
cursor: default;
}
const Footer = () => {
let a="<b>Hey</b>"
return (
<div>
Some bold text: {a}
</div>
)
}
这只会呈现为Some bold text: <b>Hey</b>.如何将粗体文本呈现为粗体？变量内容是我自己的,所以我不必担心eval的东西.
我正在阅读关于Angular 2的ng-book,有一段代码:
return this.http.get(queryUrl)
.map((response: Response) => {
return (<any>response.json()).items.map(item => {
// console.log("raw item", item); // uncomment if you want to debug
return new SearchResult({
id: item.id.videoId,
title: item.snippet.title,
description: item.snippet.description,
thumbnailUrl: item.snippet.thumbnails.high.url
});
});
});
.json()第3行是什么？我已经google了,但找不到这种方法的任何描述.