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

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

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

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

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: 'hello-world组件',
    // templateUrl: './app.component.html',
    // 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つの方法を紹介

4. コンポーネントを作成する 2 番目の方法: Angular でコンポーネントを構築するにはどうすればよいですか? 3つの方法を紹介

cli を使用してコンポーネントを作成する

入力コマンド:

ng generate component hello-world

##5. コンポーネントを作成する 3 番目の方法:

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

1. vscode Angular ファイルでダウンロード

##2. コンポーネントの下を右クリックすると、次の図が表示されます

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

#3. 「ジェネレーター コンポーネント」をクリックし、コンポーネント名を入力して Enter キーを押します

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

##4. コンポーネントの生成

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

プログラミング関連の知識については、プログラミング入門をご覧ください。 !

以上がAngular でコンポーネントを構築するにはどうすればよいですか? 3つの方法を紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。