Angular 17独立组件中*ngIf绑定div报错问题求助

问题根源 #

你的CategoriesStyleThreeComponent是独立组件（standalone: true），这类组件不会继承任何NgModule（包括AppModule）中导入的模块。虽然AppModule里导入了CommonModule，但独立组件必须在自身的imports数组中显式导入所需的指令或模块，才能使用*ngIf这类内置指令。

修复步骤 #

修改组件代码，在@Component的imports数组中添加CommonModule（或直接添加NgIf）：

方式一：导入CommonModule（推荐，包含所有常用内置指令）

import { Component, OnInit } from '@angular/core';
import { ThemeCustomizerService } from '../theme-customizer/theme-customizer.service';
import { RouterLink } from '@angular/router';
import { CategoryService } from '../../../services/category.service';
import { Category } from '../../../models/category.model';
// 导入CommonModule
import { CommonModule } from '@angular/common';

@Component({
selector: 'app-categories-style-three',
standalone: true,
// 添加到imports数组
imports: [RouterLink, CommonModule],
templateUrl: './categories-style-three.component.html',
styleUrls: ['./categories-style-three.component.scss']
})
export class CategoriesStyleThreeComponent implements OnInit {
// ... 其余代码不变
}

方式二：仅导入NgIf（轻量化，只引入所需指令）

import { Component, OnInit } from '@angular/core';
import { ThemeCustomizerService } from '../theme-customizer/theme-customizer.service';
import { RouterLink } from '@angular/router';
import { CategoryService } from '../../../services/category.service';
import { Category } from '../../../models/category.model';
// 仅导入NgIf
import { NgIf } from '@angular/common';

@Component({
selector: 'app-categories-style-three',
standalone: true,
// 添加到imports数组
imports: [RouterLink, NgIf],
templateUrl: './categories-style-three.component.html',
styleUrls: ['./categories-style-three.component.scss']
})
export class CategoriesStyleThreeComponent implements OnInit {
// ... 其余代码不变
}

额外说明 #

• 独立组件是Angular 14+的特性，设计目的是让组件无需依赖NgModule即可使用，所有依赖必须显式导入到组件自身的imports中。
• 你在AppModule中导出CategoriesStyleThreeComponent的操作对于独立组件来说没有必要，因为独立组件可以直接在其他组件或模块中导入使用。

内容的提问来源于stack exchange，提问作者MJ X