ホームページ > 記事 > ウェブフロントエンド > Angular でコンポーネントを構築するにはどうすればよいですか? 3つの方法を紹介

Angular でコンポーネントを構築するにはどうすればよいですか? 3つの方法を紹介

青灯夜游転載: 2021-08-12 10:32:566739ブラウズ

Angular でコンポーネントを構築するにはどうすればよいですか?この記事では、Angular でプロジェクトを作成する方法と、Angular でコンポーネントを作成する 3 つの方法を紹介します。

#1. angular と angularjs の違いは何ですか?

名前の変更。Angular2 以降は正式に Angular という名前になり、2.0 より前のバージョンは AngualrJS と呼ばれます。 [関連チュートリアル推奨: "angular チュートリアル"]
1.x は、AngularJS の js ファイルを Web ページに導入して使用します。2.0 以降は、両者の違いは Java と JavaScript に似ています。

Angular でコンポーネントを構築するにはどうすればよいですか? 3つの方法を紹介

#2. プロジェクトを作成します

1. グローバル Angular CLI コマンドラインツールをインストールします

npm install -g @angular/cli

2. プロジェクトを作成します

ng new angular-tour-of-heroes

注: ノードのバージョンは 12 以降である必要があります。そうでない場合は、次のプロンプトが表示されます。「'ng' は内部コマンドでも外部コマンドでも、操作可能でもありません」プログラムまたはバッチファイル。”

3. プロジェクトを実行します

cd angular-tour-of-heroes
ng serve --open

Angular でコンポーネントを構築するにはどうすればよいですか? 3つの方法を紹介

#3. コンポーネントを作成する最初の方法:

1.src ファイルの下に新しいファイルを作成し、hello-world.component.ts

import { Component } from "@angular/core";

@Component({
    selector: &#39;hello-world组件&#39;,
    // templateUrl: &#39;./app.component.html&#39;,
    // styleUrls: ["./app.component.scss"]
    template: `<h1>{{text}}</h1>`

})
export class HellowordComponent {
    constructor() {}
    text = "第一个模板";
}

Angular でコンポーネントを構築するにはどうすればよいですか? 3つの方法を紹介 #2 という名前を付けます。 .app.component.html または app.component.ts にコンポーネントタグ

// 引入ng核心包和组件
import { Component } from &#39;@angular/core&#39;;
@Component({
  selector: &#39;app-root&#39;,//当前组件的引用名称
  template:
    ` 
 <hello-world></hello-world>//x新增组件标签

    `  ,
  // templateUrl: &#39;./app.component.html&#39;,//组件模板
  styles: [&#39;h1 { color:red}&#39;]
  // styleUrls: [&#39;./app.component.scss&#39;]//组件的样式文件

})
export class AppComponent {//组件名称

}

を追加します。 3. コンポーネントを app.module.ts に導入し、宣言します。コンポーネント Angular でコンポーネントを構築するにはどうすればよいですか? 3つの方法を紹介