1、angular2 object undefined
問(wèn)題描述：通過(guò)http>get()方法獲取到的對(duì)象accountDetails = {userName : 'alice'}醋界。
之后在頁(yè)面里面通過(guò)取值表達(dá)式 {{accountDetails.userName}}進(jìn)行展示。
結(jié)果報(bào)錯(cuò)：
angular2 object undefined解決方案：可以試試使用
?.逻卖，比如：{{accountDetails?.userName}}
2、父級(jí)Component向子級(jí)Component通過(guò)@Input()傳入Function過(guò)程昭抒。
子級(jí)Component：
export class ChildComponent {
@Input() arClick : Function;
@HostListener('document:keydown',['$event'])
onKeyDown (e : KeyboardEvent) {
e.stopPropagation();
if (e && e.keyCode == 13) {
this.arClick('B');
}
}
}
父級(jí)Component：
export class FatherComponent {
constructor () {
}
printMsg = (someText) => {
console.log(someText);
}
}
父級(jí)模板內(nèi)使用：
<ar-search [arClick]="printMsg"></ar-search>
3评也、關(guān)于Object.assign()方法的使用。
發(fā)現(xiàn)在代碼中直接使用Object.assign()方法不行灭返。之前網(wǎng)上有看到別人使用object-assign這個(gè)庫(kù)：
var objectAssign = require('object-assign');
objectAssign({foo: 0}, {bar: 1});
//=> {foo: 0, bar: 1}
// multiple sources
objectAssign({foo: 0}, {bar: 1}, {baz: 2});
//=> {foo: 0, bar: 1, baz: 2}
// overwrites equal keys
objectAssign({foo: 0}, {foo: 1}, {foo: 2});
//=> {foo: 2}
// ignores null and undefined sources
objectAssign({foo: 0}, null, {bar: 1}, undefined);
//=> {foo: 0, bar: 1}
其實(shí)可以更簡(jiǎn)單的盗迟，試試這樣：
(<any>Object).assign({foo: 0}, {bar: 1})
只需加個(gè)any就ok了。
4熙含、Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
在Component中連續(xù)多次修改一個(gè)屬性值罚缕，F(xiàn)12頁(yè)面有報(bào)這個(gè)錯(cuò)，找到幾個(gè)解釋怎静。
Angular utilizes zones to know when an event is fully processed by patching some async APIs like (addEventHandler, setTimeout, ...) and then runs change detection after each event.
In dev mode Angular does an additional change detection run, just after the first one. Because there was no event in between, no change should have happened.
If the model still changed, Angular considers this to be a possible bug.
That's exactly it. In development mode the change detection runs a second time and compares the current value with the first run.
If the value differs, then it "thinks" that the change was caused by itself. That's why it throws. However this doesn't happen in production mode with
enableProdMode().
解決方案：
import { Component, enableProdMode } from '@angular/core';
enableProdMode();
5邮弹、上個(gè)星期碰到的印象最深的一個(gè)問(wèn)題。
問(wèn)題描述(直接上圖)：
首先因?yàn)檎伊薃PI發(fā)現(xiàn)本來(lái)這個(gè)DynamicComponentLoader是可以的蚓聘，結(jié)果發(fā)現(xiàn)新版本已經(jīng)被摒棄了腌乡。
所以就在stackoverflow上發(fā)帖，結(jié)果又被管理人員給我標(biāo)記了夜牡，說(shuō)是有類似的答案与纽，紛紛去查看了下，發(fā)現(xiàn)并沒(méi)有什么卵（luan）用塘装。
所謂靠人還不如靠自己急迂，接下來(lái)就是自己慢慢的摸索之路，所幸老天也不愿我在國(guó)慶放假前留下這么個(gè)遺憾氢哮。
最終的解決方案：把要編譯（重新編譯）的靜態(tài)html封裝成為一個(gè)Component袋毙，重新插入到頁(yè)面里面去。（細(xì)的就不多說(shuō)了...）
import {NgModule,
Component, enableProdMode, ViewChild, ViewContainerRef, ComponentRef, Compiler,
ComponentFactory
} from '@angular/core';
import {FooterService} from "./footer.service";
import {BrowserModule} from "@angular/platform-browser";
import {RouterModule} from "@angular/router";
import {Promise} from 'rxjs'
enableProdMode();
@Component({
selector : 'footer',
template : '<div class="foot" id="footer"><div #dynamiccompile></div></div>',
providers : [FooterService]
})
export class FooterComponent{
@ViewChild('dynamiccompile',{read : ViewContainerRef}) target : ViewContainerRef;
private cmpRef : ComponentRef<any>;
constructor (
private footerService : FooterService,
private compiler : Compiler) {
}
ngAfterViewInit () {
if (this.cmpRef) {
this.cmpRef.destroy();
}
this.footerService.getHtmlCode().subscribe(
res =>
(
(this.compileToComponent("<div (click)='test()'>click</div>")).then((factory: ComponentFactory<any>) => {
this.cmpRef = this.target.createComponent(factory)
})
),
error => console.log(<any>error)
)
}
ngOnDestroy() {
if (this.cmpRef) {
this.cmpRef.destroy();
}
}
private compileToComponent(template1: string): Promise<ComponentFactory<any>> {
@Component({
template: template1,
})
class DynamicComponent {
test () : void {
console.log('111');
}
}
@NgModule({
imports: [BrowserModule,RouterModule],
declarations: [DynamicComponent]
})
class DynamicModule { }
return this.compiler.compileModuleAndAllComponentsAsync(DynamicModule).then(
factory => factory.componentFactories.find(x => x.componentType === DynamicComponent)
)
}
}
未完待續(xù)...
