Angular Material:将sidenav添加到几页？
Angular Material 是一个用于构建精美的、响应式的 Web 应用程序的 UI 组件库。它提供了一套丰富的可重用组件，包括按钮、卡片、对话框、表格等，以及一个灵活的布局系统。
在 Angular Material 中，可以将 sidenav（侧边栏）添加到多个页面。通过将 sidenav 放置在应用程序的根组件中，可以在整个应用程序中共享该侧边栏。
以下是将 sidenav 添加到几个页面的步骤：
- 在根组件的 HTML 模板中，使用
<mat-sidenav-container>元素创建一个容器，该容器包含一个<mat-sidenav>元素和一个<mat-sidenav-content>元素。例如：
<mat-sidenav-container>
<mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
<mat-sidenav-content>Main content</mat-sidenav-content>
</mat-sidenav-container>- 在需要添加 sidenav 的页面的组件中，将
<mat-sidenav-container>元素作为根元素，并在<mat-sidenav-content>元素中放置页面的主要内容。例如：
<mat-sidenav-container>
<mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
<mat-sidenav-content>
<!-- 页面主要内容 -->
</mat-sidenav-content>
</mat-sidenav-container>通过这种方式，可以在多个页面中使用相同的 sidenav，并且可以根据需要在每个页面上进行自定义和调整。
关于 Angular Material 的更多信息和使用示例，可以参考腾讯云的相关产品：Angular Material。
相关·内容
1回答
我通过@angular/material将ng add @angular/material添加到ng应用程序中。然后，我在app.modules.ts中导入了模块，如下所示：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from
浏览 6提问于2021-11-10得票数 0
回答已采纳
我目前使用角4，我遵循链接关于如何使用角材料。这就是我到目前为止所做的：
app.module.ts
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import 'hammerjs';
imports: [
BrowserAnimationsModule
],
我的index.html中包含了主题风格
<head>
<link href="https://fonts.googleapis.com/icon?fa
浏览 0提问于2017-05-05得票数 0
回答已采纳
我已经安装了angular-material2 2，这是package.json条目
"@angular/material": "^2.0.0-beta.7",
然后在我的app.module.ts中导入
import { MaterialModule } from '@angular/material';
和@NgModule
@NgModule({
imports: [BrowserModule, MaterialModule],
declarations: [AppComponent],
bootstrap: [AppCompo
浏览 27提问于2017-06-29得票数 1
回答已采纳
使用angular-material构建一个sidenav。想让它更模块化，所以使sidenav栏和主工具栏不同的组件。这在我们的主工具栏测试用例中导致了NullInjectorError: No provider for MatSidenavContainer!，即使MaterialModule/MatSidenavModule可用于测试。
已尝试将MaterialModule (包含用于AngularMaterial的模块)添加到测试套件中的导入。我还尝试将其他组件(NavbarComponent和AppComponent)添加到测试套件。我还尝试将模块单独添加到文件中(例如import
浏览 0提问于2019-07-04得票数 0
我用的是angular13。和Vs代码。‘’mat sidenav容器‘不是一个已知的元素属性绑定ngIf，它不被嵌入模板上的任何指令所使用。确保属性名拼写正确，所有指令都列在"@NgModule.declarations“‘路由器-出口’不是一个已知的元素:等等。我在这个app.component.html中有一些错误。我已经检查了module.ts并安装了。但是，我可以建立和服务，但我有错误。
我在路由器出入口，ngif，mat容器上出错了。所以我不知道怎么解决。
我可以构建，那么模板的错误？比如埃林特..。
请告诉我怎么修理。
app.component.html
<!
浏览 25提问于2022-05-04得票数 -1
回答已采纳
1回答
我目前使用的是Angular Material。我想主题我的页面使用预先构建的主题，旨在让它看起来像this。但是，page仍然以灰色显示。我如何了解如何应用主题？我添加了这个 @import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"; 添加到styles.css文件。我试过在我的app.component.html中做color="primary"，但是没有用。以下是app.component.html <mat-sidenav-container
浏览 16提问于2019-01-08得票数 1
回答已采纳
我刚开始使用角质材料组件。我试图在我现有的个人项目中添加一个Sidenav。它显示<mat-sidenav>和<mat-sidenav-content>中包含的内容，但是由于某种原因，切换动画似乎无法工作。我尝试了3种不同的浏览器(边缘浏览器、火狐浏览器、Chrome浏览器)私有/隐名模式和非私有/非隐藏模式，但切换动画不起作用。
我不确定这是否因为<mat-sidenav-container>包含在一个封闭的父div中。我认为它不应该影响<mat-sidenav-container>的行为
在下面的图像中，设置选项卡处于活动状态。问题：
Sid
浏览 2提问于2022-03-23得票数 -2
回答已采纳
我正在创建一个新的角7应用程序，在过去的几天里我一直在研究这个问题，但是我无法找到解决这个错误的方法：
不能绑定到“routerlink”，因为它不是“a”的已知属性
下面是一些我看过的和的文章，但是“不去”。
以下是布局：
app ->导航这里是代码：
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { UltiMaterialModule } from
浏览 0提问于2018-11-04得票数 8
回答已采纳
我有两个模块: AppModule和AFModule：
app.module.ts
import { NgModule } from '@angular/core';
...
...
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
...
@NgModule({
imports: [
浏览 7提问于2020-02-10得票数 1
2回答
我一直在使用angular2 rc 5和ngModule
所以现在我想用有角度的材料。例如，我想使用angular2材料sidenav。我一直在用npm安装它
npm I@angular2-材料/sidenav
然后，我在我的systemjs-config.js上放置了这个2角的材料。
const map: any = {
'@angular2-material': 'vendor/@angular2-material'
};
之后，我在我的ngModule中导入了棱角材料。
@NgModule({
imports: [MdButtonModul
浏览 2提问于2016-09-01得票数 0
我在使用MatDrawerMode时遇到TS2305: Module '"../../../../node_modules/@angular/material/sidenav"' has no exported member 'MatDrawerMode'.错误，以下是我的代码
在组件中：
import { MatDrawerMode } from '@angular/material/sidenav';
// used as a property
sidebarMode: MatDrawerMode;
app.modules
浏览 1提问于2020-08-05得票数 0
1回答
我正在创建sideNav的角度应用，我是使用角材料。我有以下代码，
<mat-toolbar class="example-header" color="primary">
<button mat-button mat-icon-button><mat-icon>menu</mat-icon></button>
<span class="company-name">Yaana</span>
</mat-toolbar>
&l
浏览 1提问于2018-04-09得票数 1
我有一个通过angular CLI创建的Angular 2项目。我已经按照Angular Material网站上的入门指南中的说明进行了操作：。当我尝试使用md-side nav标签时，我仍然看不到以角度材料为主题的网站。
我的组件代码：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.c
浏览 2提问于2017-07-19得票数 0
我刚把我的角材料项目更新到BETA.0.12
在更新之前，一切都很好，但是在更新之后，我不知道我做错了什么
我有个错误
compiler.es5.js:1694 Uncaught Error: Template parse errors:
Can't bind to 'opened' since it isn't a known property of 'md-sidenav'.
1. If 'md-sidenav' is an Angular component and it has 'opened' input
浏览 5提问于2017-10-16得票数 3
回答已采纳
我目前正在做angular项目。根据angularjs的材料设计规范，该应用程序有一个sidenav。当我在chrome和其他主要浏览器上点击控制sidenav的菜单图标时，它可以工作，但在firefox上不能工作。请访问下面的chrome和firefox链接，在plunker上测试示例应用程序。
<body layout="column" ng-controller="sidenavController as vm">
<md-toolbar layout="row">
<md-button
浏览 1提问于2017-08-09得票数 0
我无法从另一个组件打开sidenav，错误在附加到此问题的图像中。实际上，我想在我的代码中使用这种风格的sidenav： https://stackblitz.com/angular/lronayrmlye?file=src%2Fapp%2Fsidenav-autosize-example.ts 但我希望能够从另一个组件打开sidenav 包含按钮的组件: navigation.component 包含sidenav的组件: layouts.component sidebar.service.ts
import { Injectable, EventEmitter } from '
浏览 25提问于2020-04-22得票数 2
2回答
我正在尝试使用新的es6语法来编写angular app。所有的控制器和视图逻辑都准备就绪并正常工作后，现在我想创建一个简单的共享service。这是我的服务：
var moduleName = 'app.services';
class EventService{
constructor($http, moment){
this.$http = $http;
this.baseUrl = '/api/events';
}
getEvents(){
return this.$http({
浏览 21提问于2016-07-28得票数 1
回答已采纳
尝试将angular材质添加到angular-cli中，但angular-materials从未出现在供应商文件中。我在system-config.ts中添加了物料文件，如下所示：
const barrels: string[] = [
// Angular specific barrels.
'@angular/core',
'@angular/common',
'@angular/compiler',
'@angular/http',
'
浏览 2提问于2016-05-14得票数 2
我将angular 8与angular材质结合使用。我使用的是angular material Sidenav路由器和自定义菜单：
<mat-sidenav-container>
<mat-sidenav #sidenav [mode]="mode" [opened]="openSidenav">
<ul class="card-body">
<li><a [routerLink]="[ 'viewprofile' ]">Vie
浏览 7提问于2019-07-11得票数 0
1回答
角材料西德纳夫模组未被识别
、、、、
我用的是角9.1.11和角度材料9.2.4。当我试图导入MaterialSidenavModule时，我遇到了这个问题，所以我可以使用一些组件，比如mat容器等等。
这是我的app.module.ts文件：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppC
浏览 3提问于2020-07-03得票数 0
我正试图使用Github操作将一个Angular(10) WebApp部署到带有CI/CD的Azure中，但我发现了一个错误，即在运行npm install命令时找不到package.json。
这是我的yml文件
name: Deploy to Azure with Hexa.ru
on:
push:
branches:
- main
- release/*
jobs:
build:
runs-on: windows-latest
strategy:
matrix:
node-version: [12.x]
浏览 6提问于2020-09-28得票数 1
回答已采纳
使用Angular CLI生成新项目并选择SASS后： Which stylesheet format would you like to use? SASS [ http://sass-lang.com ] 使用ng添加材料： ng add @angular/material 最后生成素材的导航栏组件： ng generate @angular/material:materialNav --name=main-nav 为我们提供了一个带有css语法的main-nav.component.sass： .sidenav-container {
height: 100%;
}
.
浏览 13提问于2019-02-14得票数 0
我正在学习angular2和material2。我试图使小网站，有简单的工具栏和固定的sidenav。我已经创建了工具栏，但是sidenav并没有像预期的那样工作。我只是使用下面的plunker代码来学习。
<md-toolbar color="primary">
Angular Material 2 App
</md-toolbar>
<md-sidnav-layout>
<md-sidenav>
<md-nav-list>
<a md-list-item>
浏览 0提问于2016-05-13得票数 3
1回答
角质材料2-不呈现整页
、、、
我正在使用作为我的角2应用程序。我的仪表板页面没有在浏览器中呈现整个页面。附件是上述问题的截图。
AppComponent -模板文件：
<router-outlet></router-outlet>
DashboardComponent -模板文件：
<md-sidenav-layout>
<md-sidenav #sidenav mode="side" class="app-sidenav md-sidenav-over" (open)="list.focus()">
<ul
浏览 1提问于2016-06-24得票数 2
回答已采纳
整个错误是: NullInjectorError: R3InjectorError(AppModule)MatSelectionList -> MatSelectionList -> MatSelectionList: NullInjectorError: No provider for MatSelectionList！
我真的不明白发生了什么，我在另一个组件中有这个元素，它没有问题地工作，我肯定要导入它，这是我的模块：
import { NgModule } from '@angular/core';
import { CommonModule } from &
浏览 4提问于2020-10-05得票数 1
回答已采纳
当我点击工具栏图标时，我正试图使用棱角的材料来打开侧导航。在我试着打开导航栏之前，一切都很好，我得到了错误：
由模块‘src/app/app.module.ts’导入的意外指令'MatDrawer in @角/MatDrawer/sidenav/index.d.ts‘。请添加一个@NgModule注释。
以下是国家预防机制模块(package.json)：
"@angular/animations": "^9.1.11",
"@angular/cdk": "^9.2.4",
"@angular/common
浏览 2提问于2020-07-05得票数 5
回答已采纳
我有一个app.component.ts，并且我已经使用ng创建了一个组件生成c.That新组件应该有一个侧向导航，并且侧向导航需要在单击按钮时切换。
我正在尝试实现侧边导航菜单，但收到如下错误："message"：“找不到模块‘@angular/material/MatSidenavModule’。”，
我的navigation.component.html文件
<mat-sidenav-container>
<mat-sidenav mode="side" opened>Sidenav content</mat-side
浏览 12提问于2020-02-17得票数 0
回答已采纳
2回答
材料设计无法识别
、、
这是我的文件夹：
-app
-content
-footer
-header
-main-header
{other services - shortcut} <- I just shortcut this bec. it is too long.
main-header.component.html
main-header.component.scss
main-header.component.spec.ts
main-header.module.t
浏览 20提问于2020-02-19得票数 0
我正试图为我的应用程序创建一个可重用的组件工具栏，但我遇到了以下问题：
Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[MatSidenavContainer -> MatSidenavContainer -> MatSidenavContainer]:
NullInjectorError: No provider for MatSidenavContainer!
NullInjectorError: R3InjectorError(AppModule)[MatSidena
浏览 5提问于2022-07-25得票数 0
我是angular的新手，我正在尝试了解这里的诀窍。新的angular 2材质的文档有点让人困惑，但我设法将标签和sidenav添加到我的应用程序中，但我无法使用我的组件创建一个按钮来打开sidenav。这个例子是我唯一的参考资料，关于它是如何完成的，我不太了解它，我认为它使用的是angular 1？
我现在在我的组件中拥有的是：
import { Component, OnInit, OnDestroy, ElementRef, Inject } from '@angular/core';
import { ActivatedRoute } from '@angula
浏览 31提问于2016-07-29得票数 0
回答已采纳
路由错误。请帮帮我！！这是文件 app.module.ts import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
浏览 7提问于2020-04-06得票数 0
回答已采纳
3回答
我有一个从另一个组件打开的sidenav。我为此创建了一个服务，因为它不是父/子关系，但我一直以未定义的方式返回导航。我做错了什么？
这是服务：
import {Injectable} from '@angular/core';
import {MdSidenav, MdSidenavToggleResult} from "@angular/material";
@Injectable()
export class SidenavService {
private sidenav: MdSidenav;
public setSidenav(siden
浏览 4提问于2017-06-10得票数 2
回答已采纳
当sidenav和头是共享服务的不同组件时，我遇到了一个问题。当检查sidenav元素时，这似乎是有效的，我可以看到切换到打开和关闭。我在这方面遇到的问题是，实际上并没有出现什么问题。
组件文件
import { Component, OnInit, ViewChild } from '@angular/core';
import { MdSidenav } from '@angular/material';
import { SidenavToggleService } from './shared/sidenavToggle.servi
浏览 1提问于2017-05-09得票数 5
我运行了一个简单的命令，它应该生成预构建的文件，这些文件可以作为导航条使用。它正确地下载，但是如果我将<main-nav></main-nav>添加到我的app.component.html页面，它只会输出一个空白页。我的控制台没有错误。下面是命令：ng generate @angular/material:material-nav --name=main-nav I正在使用Mac、角6和角材料。下面是我所关注的视频：。我已经独立地测试了每个部分，并发现<mat-sidenav></mat-sidenav>函数根本无法工作。
浏览 1提问于2018-07-08得票数 0
回答已采纳
我是Angular/material2 2的新手，我不确定在尝试遵循sidenav上的文档时会错过什么。
在我的AppComponent中，我想显示一个sidenav，我已经实现如下：
app.component.tss
import {
NgModule,
Component
} from '@angular/core';
import {
MatSidenavModule,
MatSidenavContent,
MatSidenav
} from '@angular/material';
import {
Br
浏览 4提问于2018-01-08得票数 15
回答已采纳
我已经创建了一个响应式的侧菜单，这是一个很好的应用程序组件，但是当我试图将函数移动到我的service.ts文件时，它根本不起作用。下面的代码用于我的app.component.ts
import { Component} from '@angular/core';
import { MyDataServiceService } from './my-data-service.service';
@Component({
selector: 'app-root',
templateUrl: './app.componen
浏览 2提问于2021-09-14得票数 0
回答已采纳
2回答
角材料侧面
、、
我正在跟踪文档。
在构建侧导航栏时，我得到了下面的错误"'mat-nav-list' is not a known element:“
我进口了以下产品
import { MatSidenavModule } from '@angular/material/sidenav';
我通过导入APIs尝试了其他组件，除了sidenav之外，所有组件都正常工作。
我真搞不清到底出了什么问题。任何建议都会很好。提前谢谢。
浏览 0提问于2018-03-04得票数 0
回答已采纳
因此，经过多次版本的斗争，我有了一个全新的angular-cli启动的应用程序，按照Angular2-materials自述文件做了所有的事情，加载和编译了按钮和卡片，我的应用程序仍然可以正常加载。
然后我在我的组件中添加了一个MdSidenavModule的导入，一切都很好。在我的app.module文件的顶部，我调用了MdSidenavModule的导入，并在@NgModule中将MdSidenavModule添加到imports部分，就像我对按钮和卡片所做的那样。除非我这样做并保存，我的应用程序可以正确编译，但它从不离开“正在加载...”。并进入我的组件，它应该打印"App wo
浏览 2提问于2016-08-27得票数 0
1回答
角质材料和ui路由器-不工作
、、、、
我正在使用角材料和ui路由器在我的项目.我正在尝试使用一个工具栏，sidenav和页脚代码对所有的页面。这意味着插入到viewname:menucontent of menu.html中的每个视图都会有工具栏和sidenav以及页脚。
我把原来的代码删掉了。所有的视图都在一个名为模板的文件夹中。登录视图运行良好，因为此视图不需要工具栏、sidenav和页脚。当我不使用菜单视图作为父视图时，Pagelist视图也是可见的。
问题是
1.我可以看到搞乱了工具栏和页脚。我想我使用了错误的角度材料指令。
2. md-content或ui视图(主要内容区域为空)。
我试着做一个代码库，但是它不起
浏览 4提问于2016-08-02得票数 0
您将如何将md-toolbar放在md-sidenav之上，类似于使用material2的？
这里有一个使用md-sidenav md-sidenav和角material2的例子，但是它不是我想要的行为。
您将如何修改这个示例-- md-toolbar如何保持在md-sidenav的顶部，就像在中一样
P.S .有一个类似的问题，但该解决方案与angular2 maerial2不兼容
浏览 2提问于2017-01-20得票数 2
回答已采纳
使用angular & material，我在左边有一个sidenav，用来提供用户的功能(登录，注册...)。
工作很好，但我希望栏是自动关闭，一旦用户点击一个菜单。目前，该酒吧仍在营业。
侧边栏代码：
<md-sidenav md-component-id="user_sidenav" class="md-sidenav-left" flex>
<md-menu-content flex>
<md-menu-item>
<md-button ui-sref=&#
浏览 0提问于2016-06-14得票数 3
我是Angular2的新手。所以我在项目中使用角质材料的过程中。但是，我有这样的：
“无导出成员MD_XXX_DIRECTIVES”错误(例如: MD_SIDENAV_DIRECTIVES、MD_LIST_DIRECTIVES)。
这些是package.json依赖项：
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core"
浏览 1提问于2016-09-21得票数 0
4回答
我在我的项目中这样使用Angular 2 Material sidenav：
<md-sidenav-layout>
<md-sidenav #start mode="side" [opened]="true">
<md-nav-list>
</md-nav-list>
</md-sidenav>
<button md-button (click)="start.toggle()">Close</button>
<
浏览 0提问于2016-10-12得票数 16
我已经开始了一个非常小的项目来使用Angular + Angular材质。我一直在尝试实现一个$mdDialog，但它不起作用。可以通过指定的按钮打开对话框，但关闭部分不起作用。我按下了应该关闭对话框的按钮，几秒钟内没有任何反应，然后它就关闭了，打开对话框的按钮不能再按下去了……我真的不知道这是怎么回事。以下是这些文件：
<!Doctype html>
<html>
<head>
<title>Some App</title>
<link rel="stylesheet" type="
浏览 1提问于2015-11-24得票数 0
我有一个应用程序，它提供延迟加载的组件，它在开发环境中工作得很好，但在我将其捆绑用于下面提到的生产后，它给出了一个错误。
ErrorHandler : Error: Uncaught (in promise): TypeError: System.import is not a function
TypeError: System.import is not a function
at a.loadAndCompile (1499149250078.main.bundle.js?version=4562730455:formatted:37406)
at a.load (149
浏览 20提问于2017-07-04得票数 0
1回答
我有点困惑，我需要包括什么，在我的新的角度材料项目，看看几个参考资料。
我发现了这些错误：
这是最后一个的位置：
以下是相关档案：
MainController.js
/**
* Created by jkl94 on 5/11/2017.
*/
var RhetoricChecker = angular.module('RhetoricChecker.controllers', ['ngMaterial']);
RhetoricChecker.controller('MainCtrl', function($scope, $t
浏览 0提问于2017-05-12得票数 0
回答已采纳
嗨，我不知道该怎么处理这个
这是错误
compiler.js:2430 Uncaught Error: Template parse errors:
Can't bind to 'mode' since it isn't a known property of 'mat-sidenav'.
1. If 'mat-sidenav' is an Angular component and it has 'mode' input, then verify that it is part of this module.
2
浏览 2提问于2019-06-28得票数 3
在我的应用程序中实现ngx-spinner时，我得到了以下错误。
错误：：
ERROR NullInjectorError: StaticInjectorError(AppModule)[NgxSpinnerComponent -> NgxSpinnerService]:
StaticInjectorError(Platform: core)[NgxSpinnerComponent -> NgxSpinnerService]:
NullInjectorError: No provider for NgxSpinnerService!
at NullInje
浏览 9提问于2020-06-10得票数 3
回答已采纳
2回答
我使用的是Angular Material的sidenav指令。当我们单击组件外时，sidenav将被关闭。当时转播的是什么活动呢？
浏览 1提问于2015-04-14得票数 2
我使用了Angular版本11和angular material版本11.2.2。我的package.json文件
{
"name": "my-dialog",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "n
浏览 1提问于2021-02-28得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
