我的模块和组件存在角度问题

Question

我正在学习 Angular 数据绑定概念并开始尝试使用 StackBlitz。

这是我的

这是我的，

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { BindingModule } from './binding/binding.module';

bootstrapApplication(BindingModule);

绑定.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { BindingComponent } from './binding.component';

@NgModule({
  imports: [CommonModule, BrowserModule],
  declarations: [BindingComponent],
  bootstrap: [BindingComponent],
})
export class BindingModule {}

绑定.component.ts

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

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

  constructor() { }

  ngOnInit() {
  }

}

我有一个 HTML

<p>

要打印，装订有效！

但我最终遇到以下错误：

错误：NG0906：BindingModule 不是 Angular 组件，请确保它具有

@Component

装饰器。

请帮忙！

Answer 1

您的项目结构看起来与平常有点不同。我不是角度专家，但你是否尝试使用“ng new”命令创建项目并再次尝试

Answer 2

您正在混合旧方式（模块）和新方式（独立组件），在独立组件中不需要声明模块，我们可以删除绑定模块并使用独立声明绑定组件，然后像这样添加导入。

独立文档

绑定.组件.ts

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

@Component({
  selector: 'app-binding',
  imports: [CommonModule], // <- browser module is not needed!
  templateUrl: './binding.component.html',
  styleUrls: ['./binding.component.css'],
  standalone: true,
})
export class BindingComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

最后我们可以像这样初始化组件

import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { BindingComponent } from './binding.component';

bootstrapApplication(BindingComponent);

堆栈闪电战