1

当我在 Angular 5 中的两个组件之间实现ng-content时，我遇到了奇怪的问题。

这是我的第一个组件是 FooterComponent

<div class="footer">
  <ng-content select="footer"></ng-content>
</div>

和 footer.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

这第二个组件是 AboutComponent

<app-footer>
  <footer>
   this is my footer
  </footer>
</app-footer>

这个 app-module.ts 在第一次尝试和第二次尝试中我导入 about.module.ts 或 footer.module.ts 而不是 AboutComponent 和 FooterComponent。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [
    AppComponent,
    AboutComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

app.component.html 只有 router-outlet 标签

<router-outlet></router-outlet>

所以我有两个问题，第一个是当我使用ng serve命令行运行 Angular 时，我没有看到任何输出。第二个也是重要的一个是当我运行ng test命令行时，我看到了这个错误......

AboutComponent should create
  Failed: Template parse errors:
  'app-footer' is not a known element:
  1. If 'app-footer' is an Angular component, then verify that it is part of 
     this module.
  2. If 'app-footer' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to 
     the '@NgModule.schemas' of this component to suppress this message. ("
     [ERROR ->]<app-footer>
     <footer>
     this is my footer
     "): ng:///DynamicTestModule/AboutComponent.html@0:0

所以我一直在尝试很多解决方案，比如

  1. 生成 about.module.ts 并导入CUSTOM_ELEMENTS_SCHEMA并尝试NO_ERRORS_SCHEMA。并且还导入FooterComponent，最后在app.module.ts中导入about.module.ts

  2. 我对 FooterComponent 做同样的事情。

  3. 我一直在尝试在每个模块中使用CUSTOM_ELEMENTS_SCHEMA和NO_ERRORS_SCHEMA，这给了我相同的结果。

而这个 package.json

{
 "name": "ng-app",
 "version": "0.0.0",
 "license": "MIT",
 "scripts": {
   "ng": "ng",
   "start": "ng serve",
   "build": "ng build --prod",
   "test": "ng test",
   "lint": "ng lint",
   "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.3",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

最后，我创建了这个新的 Angular-cli 项目。

谢谢。

4

1 回答 1

1

您需要做的第一件事是将 包含RouterModule在app.module.ts中。您正在尝试使用路由器插座 ( <router-outlet></router-outlet>) 而不使用它。这是行不通的。

更新app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { FooterModule } from './footer/footer.module';
import { FooterComponent } from './footer/footer.component';

@NgModule({
declarations: [
    AppComponent
],
imports: [
    BrowserModule,
    FooterModule,
    RouterModule.forRoot([
        {path: '', component: FooterComponent}
    ])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

请参阅RouterModule. 此外，在添加RouterModule到 imports 数组之后，我还添加了一个默认路由，该路由指向FooterComponent. 我需要一些东西来路由，这就是我选择的。随着应用程序的进展，将其更改为您喜欢的任何内容。

请注意，即使进行了这些更改，您也不会在浏览器中看到任何内容。您需要在页脚中添加一些内容才能看到某些内容。我会把这部分留给你。如果您在运行时右键单击并检查主页ng serve，您将看到页脚元素确实被渲染（它们只是没有任何有价值的内容）。

至于测试，您需要将与导入一起添加FooterComponent到规范中的声明部分。AboutComponent更新了以下规格。

import { FooterComponent } from './../footer/footer.component';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { AboutComponent } from './about.component';

describe('AboutComponent', () => {
let component: AboutComponent;
let fixture: ComponentFixture<AboutComponent>;

beforeEach(async(() => {
    TestBed.configureTestingModule({
    declarations: [ AboutComponent, FooterComponent ]
    })
    .compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(AboutComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
});

it('should create', () => {
    expect(component).toBeTruthy();
});
});

由于AboutComponent托管FooterComponent，因此单元测试需要了解组合中的所有组件。这可以解决这个问题。

然后，为了清除与测试相关的最终错误AppComponent，您需要模拟一个路由器插座以在规范中使用。该代码如下。

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { Component } from '@angular/core';

describe('AppComponent', () => {
beforeEach(async(() => {
    TestBed.configureTestingModule({
    declarations: [
        AppComponent, RouterOutletStubComponent
    ],
    }).compileComponents();
}));
it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
}));
it(`should have as title 'app'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
}));
});


@Component({selector: 'router-outlet', template: ''})
class RouterOutletStubComponent { }

由于您删除了所有原始 HTML 以AppComponent将其用作路由器出口，因此我不得不删除其中一个单元测试，因为不再需要它。

这RouterOutletStubComponent是有趣的事情。这允许AppComponent单元测试成功运行。此时所有的AppComponent都是一个路由器出口容器。

快乐编码！

于 2018-03-20T22:27:40.363 回答