Angular 中的 ng 内容

在 Angular 中，ng 前缀几乎出现在所有的指令和组件中。这个前缀不是 Angular 必需的，但是它是 Angular 框架的约定，可以让代码更加清晰易懂。

下面是一些常见的 ng 内容：

指令

指令是用于修改 DOM 元素行为的指令。在 Angular 中，ng 通常用于自定义指令。

例如，ngIf 指令，用于根据某个逻辑条件显示或隐藏一个元素。

```html
<div *ngIf="showElement">这个元素会根据showElement的真假值显示或者隐藏。</div>

还有一个常见的 ng 指令，ngFor，用于循环一个数组并在模板中生成多个元素。

```html
<div *ngFor="let item of items">
  {{item}}
</div>

组件

组件是 Angular 应用程序中的构建单元。组件通常包括模板、样式和 TypeScript 代码。

当你创建一个组件时，它在 @Component 装饰器中使用 selector 属性定义一个选择器，用于在模板中查找该组件。

```typescript
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My App';
}

在模板中，你可以使用该选择器来渲染组件。

```html
<app-root></app-root>

服务

服务是用于在多个组件之间共享信息的类。在 Angular 中使用 @Injectable 装饰器定义服务。

```typescript
@Injectable({
  providedIn: 'root'
})
export class MyService {
  private data: any;

  setData(data: any) {
    this.data = data;
  }

  getData(): any {
    return this.data;
  }
}

在组件中使用该服务时，你需要先将它注入到构造函数中。

```typescript
constructor(private myService: MyService) {}

然后在组件中使用该服务的方法。

```typescript
this.myService.setData('Hello Angular!');
const data = this.myService.getData();
console.log(data);

总结

ng 前缀是 Angular 框架的约定，用于区分指令、组件和服务等元素。通过使用 ng 前缀，可以使 Angular 代码更加清晰易懂，也方便了开发者之间的交流。