Angular 5 ng 内容问题

Question

当我在 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>

还有这个应用程序-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>

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

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

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

生成 about.module.ts 并导入 CUSTOM_ELEMENTS_SCHEMA 并尝试 NO_ERRORS_SCHEMA.并且还导入 FooterComponent 最后在 app.module.ts
我对 FooterComponent 做同样的事情。
我已经尝试在每个模块中使用 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 项目。

谢谢。

Answer 1

您需要做的第一件事是在 app.module.ts 中包含 RouterModule。您正试图在没有它的情况下使用路由器插座 (<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 的默认路由。我需要一些路由，这就是我选择的。随着申请的进展，将此更改为您喜欢的任何内容。

请注意，即使进行了这些更改，您也不会在浏览器中看到任何内容。您需要向页脚添加一些内容才能看到某些内容。我会把那部分留给你。如果您 right-click 并在运行宁 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 { }

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

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

编码愉快！

Angular 5 ng 内容问题

Angular 5 ng-content issue

typescript

angular-cli

angular5

ng-content