Question

我需要将滑块组件添加到主页组件。

滑块组件

slider.component.ts

＆＃13;

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

＆＃13;

slider.component.html

＆＃13;

<div class="container-image-slider">
         <img id="img1">
          <img id="img2">
          <img id="img3">
  </div>

＆＃13;

主页组件 home.component.ts

＆＃13;

import { Component, OnInit } from '@angular/core';
 @Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

＆＃13;

home.component.html

<app-slider></app-slider>

这里的问题是它给出了错误

＆＃13;

Uncaught Error: Template parse errors:
'app-slider' is not a known element:
1. If 'app-slider' is an Angular component, then verify that it is part of this module.
2. If 'app-slider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-slider></app-slider>"): ng:///AppModule/HomeComponent.html@0:0
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24668)
    at JitCompiler._parseTemplate (compiler.js:34621)
    at JitCompiler._compileTemplate (compiler.js:34596)
    at eval (compiler.js:34497)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34497)
    at eval (compiler.js:34367)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34366)

＆＃13;

Answer 1

您必须在app.module.ts中导入该组件：

import { AppSliderComponent } from 'pathToComponent';

@NgModule({
    declarations: [
        AppComponent,
        AppSliderComponent
]

Answer 2

请在app.module.ts文件中导入此组件 Expample： - 从＆＃39; ./ SliderComponent .component＆＃39;中导入{SliderComponent}; 并在decalartion prpery数组中添加SlinderCompoent 例声明：[ SlinderCompoent ]

将组件选择器用于Angular 4中的其他组件

2 个答案: