2019年10月3日


図1に示すように、メインアセンブリがアセンブリから渡されたパラメータに応じて、アセンブリからパラメータを渡す - 異なるページを示す結果に応じて:

STEP1:@input TSファイル属性を持つサブアセンブリ()のパラメータは、このコンプライアンスは、本体から渡される識別
入力パラメータの一部
@input()ヒーロー:EGをヒーロー; - >本体からヒーローを受信しますオブジェクトの英雄属性

STEP2:本体テンプレート、EGでプロパティ値を結合英雄:
<アプリケーション・ヒーロー・ディテール[英雄] =「selectedHero」> </アプリケーション・ヒーロー・ディテール>
[英雄] =「selectedHero」属性が角度結ばれます文法を与えられました。
これは、結合一方向のデータであり、

注意:本体のテンプレートを、主人公の追加属性名セレクタ結合サブアセンブリが中に存在する必要があり
、クラスファイルサブアセンブリTSと@input識別と装飾的な属性
Aは、以下のように、そうでない場合はスローされます例外:
できます「以来hero1「Tはと結合する」それは、既知のプロパティではありません」 サブアセンブリ」。

2、サービス-サービスの
コンポーネントは、直接アクセスとデータ格納すべきではない、彼らはショー偽のデータかどうかを知るべきではありません。彼らはすべき
表示データに焦点を当て、およびサービスに委託し、データアクセスの責任は
お互いを知っていない複数のサービスクラス間で情報を共有するための良い方法です

サービスのメタデータオブジェクトを受け入れる@Injectable()デコレータ

サービスコンポーネントに注入角度を要求する前に、まず、依存性注入システムにこのサービスを提供しなければならない
あなたが登録したプロバイダによってこれを達成することができます

デフォルトでは、角度CLIサービスがデコレータによって@Injectableに追加されます生成NGコマンド
ルートの注入は、サービスプロバイダとして登録されますと、メタデータの形式

@Injectable({
providedIn:「ルート」、
})
プロバイダのルートは、他の場所に注入することができるように

図3に示すように、サービス・コンポーネントに

STEP1:最初のインポートサービス

STEP2:コンストラクタ(プライベートheroService:HeroServiceは ){}
HeroServiceの注入点としてマークするためにプライベートheroService属性を宣言する
角度アセンブリを作成する場合、システムはHeroservice heroServceに噴射パラメータに依存する
シングルトンオブジェクト

STEP3:データ・サービスを取得するための関数を作成し、ngOnInitの中で関数を呼び出す
注:これは、コンストラクタで呼び出すことが最善ではありません、これだけの操作を初期化し、そのシンプルなコンストラクタ保つ:
例えば、割り当てコンストラクタ引数プロパティに。
コンストラクタは何もしてはならない、それは確かに、リモートサービスへのHTTPリクエストを送信する関数を呼び出すべきではありません
が、ngOnInitに呼び出すことにしました

図4は、(観測)のデータを観察することができます

データを取得する-実際のアプリケーションが応答を待って、サーバから取得され、非同期でデータを取得する必要がある
Observble RXJSをキークラスライブラリがされて
(のRxJSでサーバーからデータを返すために使用することができます)をシミュレートする機能、例えば:

getHeroes(): Observable<Hero[]> {
return of(HEROES);
}

调用该函数,获取结果:
this.Service.getHeroes()
.subscribe(result =>this.heroes = result);

5、constructor(public messageService: MessageService) {}
Angular只会绑定到组件的公共属性,所以这个messageService必须是public
HTML绑定语法:可以直接调用messageService中的方法
(click)="messageService.clear()"

6、若在ng new my-app命令中选择了不创建Routing模块,则用如下命令可以生成:
ng generate module app-routing --flat --module=app
--flat 把这个文件放进了src/app中,而不是单独的目录中
--moudle = app,告诉CLI把它注册到AppModule的imports数组中

7、添加路由定义:
路由定义会告诉路由器,当用户点击某个链接或者在浏览器地址栏中输入某个URL时,
要显示哪个视图。

典型的Angular路由(Route)有两个属性:
1、path:一个用于匹配浏览器地址栏中URL的字符串
2、component:当导航到此路由时,路由器应该创建哪个组件

8、RouterModule.forRoot()
你必须首先初始化路由器,并让它开始监听浏览器中的地址变化
把RouterModule添加到@NgModule.imports数组中,并用routes来配置它。你只要
调用imports数组中的RouterModule.forRoot()函数就行了。
imports: [RouterModule.forRoot(routes)]

这个方法之所以叫forRoot(),是因为你要在应用的顶级配置这个路由器,此方法会提供
路由所需的服务提供商和指令,还会基于浏览器的当前URL执行首次导航。

9、添加路由出口(RouterOutlet)
<router-outlet></router-outlet> --当连接到组件时,才显示视图

10、添加路由连接(routerLink)
<a routerLink="/heroes">Heroes</a>

11、添加默认路由
当应用启动时,浏览器的地址栏指向了网站的根路径,它没有匹配到任何现存路由,
因此路由器也不会导航到任何地方。<router-outlet>下方是空白的
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' }

12、ActivatedRoute --保存着到当前组件实例的路由信息。这个组件对从URL
中提取的路由参数感兴趣

location 是一个angular的服务,用来与浏览器打交道

13、javaScript中,将操作数转为数字:+"90" => 90

14、回到原路
this.location.back()

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

おすすめ

転載: www.cnblogs.com/QQ-lala/p/11621499.html