我想在我的Ionic 4專案中把我的頁眉作為一個單獨的組件外包出去，這樣我就可以重復使用這個組件。
我的嘗試：
我的儀表盤頁面，我想在上面顯示我的標題
我的儀表盤頁面。
<ion-header>
<app-header title="Dashboard"/span>> </app-header>
</ion-header>
我的header.component.html
<ion-header class="test"/span>>
<ion-toolbar class="header-background-color"/span>>
<ion-buttons slot="start">/span>
<ion-menu-button></ion-menu-button>
</ion-buttons>/span>
<ion-title id="dashboaerdheadline">/span>
{{lablesHeadlines.dashboard}}
</ion-title>{lablesHeadlines.dashboard}}。
</ion-toolbar>/span>
</ion-header>
在dashboard.module.ts中，我添加了這個組件
。import { NgModule } from '@angular/core'/span>;
import { CommonModule } from '@angular/common'/span>。
import { FormsModule } from '@angular/forms'/span>。
import { IonicModule } from '@ionic/angular'/span>。
import { DashboardPageRoutingModule } from './dashboard-routing.module' ;
import { DashboardPage } from './dashboard.page' ;
import { MapComponent } from './map/map.component'。
import { HeaderComponent } from './header/header.component';
@NgModule（{
imports: [
CommonModule,
FormsModule,
IonicModule。
DashboardPageRoutingModule.
],
declarations: [DashboardPage, MapComponent, HeaderComponent]
})
export class DashboardPageModule {}。
當我啟動我的應用程式時，我得到了以下錯誤：
我的控制臺（錯誤）。
我的控制臺(Errors)
core.js：6210 ERROR TypeError: 不能讀取屬性of undefined (讀取'dashboard')
at HeaderComponent_Template (template.html:16)
at executeTemplate (core.js:9600)
at refreshView (core.js:9466)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)
at refreshView (core.js:9516)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)
at refreshView (core.js:9516)
at refreshEmbeddedViews (core.js:10591)
defaultErrorLogger @ core.js:6210。
core.js:6210 ERROR Error: 未捕獲（in promise）。TypeError。不能讀取屬性of undefined (讀取'dashboard')
TypeError。不能讀取屬性of undefined（讀取'dashboard'）。
at HeaderComponent_Template (template.html:16)
at executeTemplate (core.js:9600)
at refreshView (core.js:9466)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)
at refreshView (core.js:9516)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)
at refreshView (core.js:9516)
at renderComponentOrTemplate (core.js:9580)
at resolvePromise (zone-evergreen.js:798)
at resolvePromise (ze-evergreen.js:750)
在zone-evergreen.js:860。
at ZoneDelegate.invokeTask (zon-evergreen.js:399)
at Object.onInvokeTask (core.js:28564)
at ZoneDelegate.invokeTask (zon-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at drainMicroTaskQueue (zone-evergreen.js:569)
defaultErrorLogger @ core.js:6210。
13core.js:6210 ERROR TypeError: 不能讀取屬性of undefined (讀取'dashboard')
at HeaderComponent_Template (template.html:16)
at executeTemplate (core.js:9600)
at refreshView (core.js:9466)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)
at refreshView (core.js:9516)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)
at refreshView (core.js:9516)
at refreshEmbeddedViews (core.js:10591)
defaultErrorLogger @ core.js:6210。
client:52 [WDS] Live Reloading enable.
113core.js:6210 ERROR TypeError: 不能讀取屬性of undefined (讀取'dashboard')
at HeaderComponent_Template (template.html:16)
at executeTemplate (core.js:9600)
at refreshView (core.js:9466)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)
at refreshView (core.js:9516)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)
at refreshView (core.js:9516)
at refreshEmbeddedViews (core.js:10591)
defaultErrorLogger @ core.js:6210。
10core.js:6210 ERROR TypeError: 不能讀取屬性of undefined (讀取'dashboard')
at HeaderComponent_Template (template.html:16)
at executeTemplate (core.js:9600)
at refreshView (core.js:9466)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)
at refreshView (core.js:9516)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)
at refreshView (core.js:9516)
at refreshEmbeddedViews (core.js:10591)
defaultErrorLogger @ core.js:6210
handleError @ core.js:6258
(匿名) @ core.js:29570
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123。
runOutsideAngular @ core.js: 28506
tick @ core.js:29570。
(匿名) @ core.js:29439
invoke @ zone-evergreen.js:364
onInvoke @ core.js:28577
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123。
run @ core.js:28461。
next @ core.js:29438.
__tryOrUnsub @ Subscriber.js: 183
next @ Subscriber.js:122.
_next @ Subscriber.js:72。
next @ Subscriber.js:49.
next @ Subject.js:39.
emit @ core.js:25926。
checkStable @ core.js:28514
onLeave @ core.js:28627。
onInvokeTask @ core.js:28571
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480。
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCaptureCallback @ zone-evergreen.js:1679
我做錯了什么，怎樣才能解決？我對Angular/Ionic還很陌生。
更新1 這是我的環境lables.ts
。export const lablesHeadlines = {
dashboard: 'Karte',
};
更新2
import { Component, OnInit } from '@angular/core'。
import { lablesHeadlines } from 'src/environments/lables'/span>;
@Component（{
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'] 。
})
export class HeaderComponent 實作 OnInit {
constructor（） { }
ngOnInit() {}。
}
更新3
ERROR TypeError: 無法讀取屬性of undefined (讀取'dashboard')
at HeaderComponent_Template (template.html:16)
at executeTemplate (core.js:9600)
at refreshView (core.js:9466)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)
at refreshView (core.js:9516)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)
at refreshView (core.js:9516)
at refreshEmbeddedViews (core.js:10591)
uj5u.com熱心網友回復：
你的匯入是正確的，但你不能以你的方式訪問它。試著把匯入的變數保存在你的HeaderComponent里面的一個新變數里：
import { Component, OnInit } from '@angular/core'。
import { lablesHeadlines } from 'src/environments/lables'/span>。
@Component（{
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'] 。
})
export class HeaderComponent 實作 OnInit {
headlines = labelsHeadlines;
constructor（） { }
ngOnInit() {}。
}
然后你就可以從你的HTML-模板里面訪問這個新的變數了：
<ion-header class="test"/span>>
<ion-toolbar class="header-background-color"/span>>
<ion-buttons slot="start">/span>
<ion-menu-button></ion-menu-button>
</ion-buttons>/span>
<ion-title id="dashboaerdheadline">/span>
{{ headlines.dashboard }}.
</ion-title> {{ headlines.dashboard }}.
</ion-toolbar>/span>
</ion-header>/span>
如果你加載該組件，那么它應該顯示Karte，并且錯誤應該被解決。
更新：
為了動態地調整標題，你需要把它作為一個輸入屬性傳進去：
<app-header [headline] =" headlines. dashboard"></app-header>/span>
因此，你還需要調整你的HeaderComponent：
import { Component, OnInit, Input } from '@angular/core'/span>;
@Component（{
selector: 'app-header',
templateUrl: './header.component.html'。
styleUrls: ['./header.component.scss'] 。
})
export class HeaderComponent 實作 OnInit {
@Input("headline")。
headline: string;
constructor（） { }
ngOnInit（）{}。
}
uj5u.com熱心網友回復：
嘗試將HeaderComponent添加到app.component.ts中
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/333027.html
標籤：