angular - 未找到模块：使用 @Input 属性时出现编译器错误 - Angular 6

Question

已生成父组件和子组件（在同一文件夹级别） - 使用 ng generate component...

我收到以下编译器错误：

./src/app/parent/parent.component.ts Module not found: Error: Can't resolve './<app-child [childMessage]="parentMessage"></app-child>' in 'c:\ myapp\src\app\parent'

child.component.ts：

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Input() childMessage: string;
  constructor() { }

  ngOnInit() {
  }
}

parent.component.ts：从'@angular/core'导入{组件，OnInit}；

@Component({
  selector: 'app-parent',
  templateUrl: '<app-child [childMessage]="parentMessage"></app-child>',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  parentMessage = "hello from parent";
  constructor() { }

  ngOnInit() {
  }
}

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ParentComponent } from './parent/parent.component';
import { ChildComponent } from './child/child.component';

@NgModule({
  declarations: [
    AppComponent,
    ParentComponent,
    ChildComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

标签： angular

Answer 1

只需将 templateurl 替换为模板，因为您直接使用 Html

@Component({
  selector: 'app-parent',
  template: `<app-child [childMessage]="parentMessage"></app-child>`,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  parentMessage = "hello from parent";
  constructor() { }

  ngOnInit() {
  }
}