Question

我正在尝试在我的角度应用程序中使用材质设计。我将BrowserAnimationsModule和MdSidenavModule导入了延迟加载功能模块。

我的控制台出错：

已加载BrowserModule。如果你需要访问共同点来自延迟加载模块的导入，例如NgIf和NgFor等指令相反，CommonModule。

这是我的功能模块：

import { NgModule } from '@angular/core';

import { SharedModule } from '../shared/shared.module';
import { ProtectedRoutingModule } from './protected-routing.module';
import { ProtectedComponent } from './protected.component';
import { TinymceComponent } from '../features/tinymce/tinymce.component';

// animations
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// material designs components
import { MdSidenavModule } from '@angular/material';

@NgModule({
  imports: [
    SharedModule,
    ProtectedRoutingModule,
    BrowserAnimationsModule,
    MdSidenavModule
  ],
  declarations: [
    ProtectedComponent,
    TinymceComponent
  ],
  exports: [
    SharedModule
  ],
  providers: []
})
export class ProtectedModule { }

我的代码出了什么问题？谁能向我解释一下？

修改

但是，当我将MdSidenavModule导入AppModule并在app.component.html中添加以下代码时：

<md-sidenav-container class="container">
  <md-sidenav mode="side" opened="true" #sidenav class="sidenav">
    <nav>
      <ul>
        <li><a routerLink = "/" routerLinkActive = "active">Home</a></li>
        <li><a routerLink = "/dashboard" routerLinkActive = "active">Dashboard</a></li>
      </ul>
    </nav>
  </md-sidenav>

  <router-outlet></router-outlet>
</md-sidenav-container>

一切正常！

修改

我发现mdSideNav只在根模块中工作，但它在子模块中不起作用。

MdSidenav已分为MdSidenav和MdDrawer。 MdSidenav现在用于顶级应用程序导航，而抽屉则用于更多本地拆分视图。虽然在此版本中两者之间没有引入差异，但未来的版本将看到添加到每个
的不同功能

https://changelogs.md/github/angular/material2/

Answer 1

您需要做的是首先实施CustomMaterialModule，这可能看起来像：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MatSidenavModule,
  MATERIAL_COMPATIBILITY_MODE,
  MatIconRegistry

} from '@angular/material';

@NgModule({
  imports: [
    CommonModule,
    MatSidenavModule,
  ],
  exports: [
    CommonModule,
    MatSidenavModule
  ]
})
export class CustomMaterialModule {
  static forRoot() {
    return {
      ngModule: CustomMaterialModule,
      providers: [
        MatIconRegistry,
        { provide: MATERIAL_COMPATIBILITY_MODE, useValue: true },
      ]
    };
  }
}

然后将其导入app.module CustomMaterialModule.forRoot()，例如CustomMaterialModule和您的功能模块导入md-

在最新的material 2.0.0-beta.11 mat-前缀中已弃用支持BrowserAnimationsModule所以我建议迁移到那个。

对于beta.11，我们已决定弃用＆＃34; md＆＃34;字首完全使用＆＃34; mat＆＃34;向前进。这会影响所有类名，属性，输入，输出和选择器（CSS类已更改回到二月）。＆＃34; md＆＃34;前缀将在下一个测试版中删除释放。

谈论core.module你最好创建一个RewriteEngine on #If it is not POST request RewriteCond %{REQUEST_METHOD} !POST #And if URL doesn't indicate index.php or /admin/index.php RewriteCond %{REQUEST_URI} !^(/index\.php|/admin/index\.php)$ [NC] #And if URL indicates .php file(extension) RewriteCond %{REQUEST_URI} \.php$ [NC,OR] #OR if URL indicates a directory called /config or /uploads RewriteCond %{REQUEST_URI} ^(/config/|/uploads/)$ [NC] #Then redirects any link to 404 not found page RewriteRule ^(.*)$ - [R=404,L] #Rest of the conditions are for URL change upto 3 GET variables RewriteRule ^([^/.]+)/?$ index.php?var1=$1 [QSA] RewriteRule ^([^/.]+)/([^/.]+)/?$ index.php?var1=$1&var2=$2 [QSA] RewriteRule ^([^/.]+)/([^/.]+)/([^/.]+)/?$ index.php?var1=$1&var2=$2&var3=$3 [QSA]并坚持下去https://angular.io/guide/styleguide#style-04-11

Answer 2

我解决了问题，问题出现在角度版本4.3.6中，更新为角度4.4.4后，一切按预期工作......

将MaterialModule导入功能模块

2 个答案: