Angular 6: footer(共享)组件中的mat-toolbar 和mat-toolbar-row 显示不正确(但没有任何错误)?
Angular 6: mat-toolbar and mat-toolbar-row in footer (shared) component is not displaying properly (but without any error)?
我在写这篇文章时已经阅读了所有类似的问题 post 但在该列表中找不到解决方案。
我在以下链接中搜索但找不到解决方案:
Angular 6 mat-table and footer without page scroll
How to target md-toolbar-row element in md-toolbar
Mat 控件在组件上工作正常,但页脚组件除外。
我正在尝试在共享页脚组件中使用 Mat-toolbar 和 mat-toolbar-row。我不知道为什么工具栏显示不正确。
起初,我遇到了这个异常。
未捕获错误:模板解析错误:
'mat-toolbar-row' 不是已知元素:
1. 如果 'mat-toolbar-row' 是一个 Angular 组件,则验证它是该模块的一部分。
2. 如果 'mat-toolbar-row' 是 Web 组件,则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到此组件的“@NgModule.schemas”以抑制此消息。 ("
然后我在下面的页脚中添加了 CUSTOM_ELEMENTS_SCHEMA,异常消失了。
import { Component, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss']
})
export class Footer
{
getYear()
{
return new Date().getUTCFullYear();
}
}
@NgModule({
exports: [Footer],
declarations: [Footer],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class FooterModule { }
现在我在浏览器控制台中没有收到任何异常并且我的应用程序正在运行但现在不显示 mat-toolbar 和 mat-toolbar-row 元素颜色和图标效果。应用程序只显示原始数据而不是准确显示。
我的页脚组件是:
<footer class="app-footer">
<div class="app-footer-link">
<p>
<span>VAA</span> © {{getYear()}}
<a href="https://www.VAA.com" target="_blank">www.VAA.com</a>
</p>
</div>
<mat-toolbar color="primary">
<mat-toolbar-row>
<span>Custom Toolbar</span>
</mat-toolbar-row>
<mat-toolbar-row>
<span>Second Line</span>
<span class="example-spacer"></span>
<mat-icon class="example-icon">verified_user</mat-icon>
</mat-toolbar-row>
<mat-toolbar-row>
<span>Third Line</span>
<span class="example-spacer"></span>
<mat-icon class="example-icon">favorite</mat-icon>
<mat-icon class="example-icon">delete</mat-icon>
</mat-toolbar-row>
</mat-toolbar>
</footer>
此外,我在 Shared.module.ts 中导入了 MaterialModule,在 app.module.ts 中导入了共享模块。
我在 App.Component.html 上调用此页脚,mat-toolbar 在 App.Component.html 上运行完美。
查看 App.Component.html 上的通话。
<mat-sidenav-content>
<div fxLayout="column" fxFill>
<div id="mainContent" fxFlex>
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
这是主题效果逻辑:
@mixin footer-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
app-footer {
.app-footer {
background: mat-color($primary);
color: mat-color($primary, default-contrast);
}
.app-footer-link a {
color: mat-color($primary, default-contrast);
}
}
}
我想按原样显示此示例:
请看透这个 URL : https://material.angular.io/components/toolbar/examples
那是因为您必须导入自定义模块中的组件正在使用的必要模块!见下文:
@NgModule({
imports: [
CommonModule,
MatIconModule,
MatToolbarModule,
// ...
],
declarations: [
Footer,
// ...
]
})
export class FooterModule { }
我在写这篇文章时已经阅读了所有类似的问题 post 但在该列表中找不到解决方案。
我在以下链接中搜索但找不到解决方案:
Angular 6 mat-table and footer without page scroll
How to target md-toolbar-row element in md-toolbar
Mat 控件在组件上工作正常,但页脚组件除外。 我正在尝试在共享页脚组件中使用 Mat-toolbar 和 mat-toolbar-row。我不知道为什么工具栏显示不正确。 起初,我遇到了这个异常。
未捕获错误:模板解析错误: 'mat-toolbar-row' 不是已知元素: 1. 如果 'mat-toolbar-row' 是一个 Angular 组件,则验证它是该模块的一部分。 2. 如果 'mat-toolbar-row' 是 Web 组件,则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到此组件的“@NgModule.schemas”以抑制此消息。 ("
然后我在下面的页脚中添加了 CUSTOM_ELEMENTS_SCHEMA,异常消失了。
import { Component, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss']
})
export class Footer
{
getYear()
{
return new Date().getUTCFullYear();
}
}
@NgModule({
exports: [Footer],
declarations: [Footer],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class FooterModule { }
现在我在浏览器控制台中没有收到任何异常并且我的应用程序正在运行但现在不显示 mat-toolbar 和 mat-toolbar-row 元素颜色和图标效果。应用程序只显示原始数据而不是准确显示。
我的页脚组件是:
<footer class="app-footer">
<div class="app-footer-link">
<p>
<span>VAA</span> © {{getYear()}}
<a href="https://www.VAA.com" target="_blank">www.VAA.com</a>
</p>
</div>
<mat-toolbar color="primary">
<mat-toolbar-row>
<span>Custom Toolbar</span>
</mat-toolbar-row>
<mat-toolbar-row>
<span>Second Line</span>
<span class="example-spacer"></span>
<mat-icon class="example-icon">verified_user</mat-icon>
</mat-toolbar-row>
<mat-toolbar-row>
<span>Third Line</span>
<span class="example-spacer"></span>
<mat-icon class="example-icon">favorite</mat-icon>
<mat-icon class="example-icon">delete</mat-icon>
</mat-toolbar-row>
</mat-toolbar>
</footer>
此外,我在 Shared.module.ts 中导入了 MaterialModule,在 app.module.ts 中导入了共享模块。
我在 App.Component.html 上调用此页脚,mat-toolbar 在 App.Component.html 上运行完美。
查看 App.Component.html 上的通话。
<mat-sidenav-content>
<div fxLayout="column" fxFill>
<div id="mainContent" fxFlex>
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
这是主题效果逻辑:
@mixin footer-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
app-footer {
.app-footer {
background: mat-color($primary);
color: mat-color($primary, default-contrast);
}
.app-footer-link a {
color: mat-color($primary, default-contrast);
}
}
}
我想按原样显示此示例: 请看透这个 URL : https://material.angular.io/components/toolbar/examples
那是因为您必须导入自定义模块中的组件正在使用的必要模块!见下文:
@NgModule({
imports: [
CommonModule,
MatIconModule,
MatToolbarModule,
// ...
],
declarations: [
Footer,
// ...
]
})
export class FooterModule { }