通異步從父數據到孩子角

使用Angularfire2，我試圖通過從火力地堡數據庫檢索從父到子對象：通異步從父數據到孩子角

家長：

@Component({ 
    selector: 'app-page', 
    styleUrls: ['./page.component.scss'], 
    template: ` 
    <app-page-render [page]="page"></app-page-render> 
    `, 
}) 
export class PageComponent implements OnInit { 
    slug: string; 
    page: FirebaseObjectObservable<Page>; 

    constructor(private af: AngularFire, private route: ActivatedRoute) { 
    } 

    ngOnInit() { 
    this.route.params 
     .switchMap((params: any) => this.af.database.object(`/pages/${params['page-slug']}`)) 
     .subscribe(page => this.page = page); 
    } 

}

兒童：

@Component({ 
    selector: 'app-page-render', 
    styleUrls: ['./page-render.component.scss'], 
    template: ` 
    <div class="page-header"> 
     <div class="page-banner"> 
     <picture> 
      <source [srcset]="page.header.desktop" media="(min-width: 1024)"> 
      <source [srcset]="page.header.tablet" media="(min-width: 768px)"> 
      <img [src]="page.header.mobile" [alt]="page.header.alt" class="page-banner--image"> 
     </picture> 
     <h1 class="page-banner--heading">{{page.header.title}}</h1> 
     <div> 
    </div> 
    <main class="main-container"> 
     <div [innerHTML]="page.content"></div> 
    </main> 
    ` 
}) 
export class PageRenderComponent implements OnInit { 
    @Input() 
    page: any; 

    constructor() { } 

    ngOnInit() { 
    } 

}

當然，這給了我「頭是未定義的」，因爲孩子在數據呈現之前解析數據。我可以添加（頁|異步）？到所有的變量，但這意味着在一個模板中有一堆異步調用，我知道這不是很好的做法。

任何將異步數據從父項傳遞給子項的最佳實踐？我已經在某些地方看到過ngOnChanges，但我不確定這是正確的策略。

來源

2017-03-03 markgoho

這是真的？在整個模板中反覆使用異步管道是不好的做法？我認爲有一個好處，你不是手動管理子目錄... –

您可以使用

<div class="page-header" *ngIf="page">

或安全導航操作

<source [srcset]="page?.header?.desktop" media="(min-width: 1024)">

來源

2017-03-03 18:42:48

如果有很多變量進來，* ngIf語句是要走的路。看起來這是在許多學習平臺和開發專家中使用的標準做法。安全的導航操作員也可以工作！ – markgoho

當然safe-nav的作品，但如果你有很多綁定它可以變得累贅 –

通異步從父數據到孩子角

回答

相關問題