在角度为2的angular.io教程的服务部分,我点击了一个名为of.for的方法,例如:
getHeroes(): Observable<Hero[]> {
return of(HEROES);
}
Run Code Online (Sandbox Code Playgroud)
或在下面的样本:
getHero(id: number): Observable<Hero> {
// Todo: send the message _after_ fetching the hero
this.messageService.add(`HeroService: fetched hero id=${id}`);
return of(HEROES.find(hero => hero.id === id));
}
Run Code Online (Sandbox Code Playgroud)
在angular.io刚刚解释
使用()的RxJS返回一个模拟英雄的Observable(Observable).
并没有解释为什么我们应该使用功能,它究竟做了什么,它有什么好处?
我有一个英雄数组,我通过*ngFor在列表中显示它,当我点击其中一个元素时,它复制到新变量和新变量通过牵引方式绑定输入.我的heroClass:
export class Hero {
id: number;
name: string;
}
Run Code Online (Sandbox Code Playgroud)
我的英雄模拟列表:
import { Hero } from './heroClass';
export const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ …Run Code Online (Sandbox Code Playgroud) 我有以下角度服务及其茉莉花测试。测试调用 f1() 并监视 f2()。函数 f2 接受变量 v2 并修改它(将字段 a 设置为 3)。函数 f2 应该用 v2 调用(如 f1 中声明的那样),但我的测试在toHaveBeenCalledWith 上失败,并说实际调用是在 f2 函数调用之后使用对象进行的。jasmine 是否在函数调用后匹配 .toHaveBeenCalledWith 的参数,这不应该是推荐的方式,或者我在这里犯了一些错误。
服务:
export class JasmineTestClass{
constructor(){
}
f2(v2){
v2.a = 3
};
f1(v1){
let v2 = {
a:30
};
this.f2(v2);
}
}
Run Code Online (Sandbox Code Playgroud)
测试:
describe('Test', () => {
let service: JasmineTestClass;
beforeEach(() => {
service = new JasmineTestClass();
spyOn(service, 'f2').and.callThrough();
});
let v1 = {
a:2, b:3
};
let v2 = {
a:30
};
it('should succeed', () …Run Code Online (Sandbox Code Playgroud) 在下面的示例中,我使用泛型函数:
function Identity<T>(arg: T): T[] {
return arg;
}
Run Code Online (Sandbox Code Playgroud)
我可以用这种方式编写我的方法:
function loggingIdentity(arg) {
return arg;
}
Run Code Online (Sandbox Code Playgroud)
这两种方法都可以接受任何类型的值并返回任何值.对于上述方法使用泛型有什么好处?在其他示例中,我使用泛型来创建一个类:
class GenericNumber<T> {
zeroValue: T;
add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };
Run Code Online (Sandbox Code Playgroud)
我可以在不使用泛型的情况下创建类和新对象:
class GenericNumber {
zeroValue;
add: (x, y);
}
let myGenericNumber = new GenericNumber();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };
Run Code Online (Sandbox Code Playgroud)
在c#中,语言类型确定是强制性的,但在typescript中是可选的,我们可以声明属性或变量或参数而无需确定类型,它们可以是任何类型.
如果有人形容我在打字稿中使用泛型的重要性和所有好处,我会很高兴.
对我来说使用嵌套路由的原因是动态处理每个页面的图标和后退按钮。我有抽象路由,因为当我单击后退按钮时,路由参数消失,我放置一个抽象路径来保留id并questionnaire在 url 中键入参数。我的抽象路径是Questionaire
{ path: 'Home', component: HomeComponent,data:{icon:'fa-home'} },
{ path: 'QuestionaireList', component: QuestionaireListComponent,data:{icon:'fa-list-ul',previousState:'/Home'} },
{
path: 'Questionaire/:questionnaireType/:id',
children:[
{ path: 'AddQuestionnaire', component: CreateQuestionnaireComponent,data:{icon:'fa-plus',previousState:'/QuestionaireList'} },
{ path: 'UpdateQuestionnaire', component: EditComponent,data:{icon:'fa-pencil',previousState:'/QuestionaireList'} },
{ path: 'QuestionList', component: QuestionListComponent,data:{icon:'fa-pencil',previousState:'/QuestionaireList'} },
{ path: 'ImportQuestion', component: ImportQuestionComponent,data:{icon:'fa-plus',previousState:'/QuestionaireList'} },
{ path: 'MetaContentList', component: MetaContentListComponent,data:{icon:'fa-database',previousState:'/QuestionaireList'} },
{ path: 'ModifyMetaContent/:metaContentId/:title', component: ModifyMetaContentComponent,data:{icon:'fa-database',previousState:'/MetaContentList'}},
]}
Run Code Online (Sandbox Code Playgroud)
另外,在questionnaire.list.html我通过 routerlink 链接到每条路径时,下面是我的链接:
[routerLink]="['/Questionaire',item.questionnaireType,item.id,'/UpdateQuestionnaire']"
Run Code Online (Sandbox Code Playgroud)
这是我的链接:
<a class="primary small ui icon button" [routerLink]="['/Questionaire',item.questionnaireType,item.id,'/UpdateQuestionnaire']" >
<i class="edit icon"></i>
</a>
Run Code Online (Sandbox Code Playgroud)
我预计当我点击链接时我会路由到这个地址: …
angular ×4
typescript ×3
.net ×1
angular-test ×1
class ×1
clone ×1
deep-copy ×1
generics ×1
jasmine ×1
javascript ×1
rxjs ×1
service ×1