更に --routing というパラメーターを加えることで、ルーティング用ファイルを自動生成してくれます。例えば、product モジュールを作成する際に ルーティング用ファイルを自動生成する場合、次のようになります。
ng generate module product --routing
generate や module は g と m で省略することもできます。
ng g m product --routing
主にプログラミング tips を書いています。
ng generate module product --routing
ng g m product --routing
ng new app1
ng serve -oもしくは次のように serve を省略して書くこともできます。
ng s -o
<div *ngIf="album$ | async as album"> <div>{{album.title}}</div> </div>
export class AlbumDetailComponent implements OnInit { ... album$: Observable<Album>; ngOnInit() { this.album$ = this.service.getAlbum(); } }
import { Component, Input } from '@angular/core'; @Component({ selector: 'app-my-label', templateUrl: './my-label.component.html', styleUrls: ['./my-label.component.css'] }) export class MyLabelComponent { constructor() { } @Input('text') text: string; }MyLabelComponent (HTML テンプレート)
<p> my-label works! {{text}} </p>
import { Component, ViewChild } from '@angular/core'; import { MyLabelComponent } from './my-label/my-label.component'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app1'; @ViewChild(MyLabelComponent) myLabel: MyLabelComponent; getText() { console.log(this.myLabel.text); } }
<app-my-label text="abc"></app-my-label>
export class AppComponent { title = 'app1'; @ViewChild('label1') myLabel1: MyLabelComponent; @ViewChild('label2') myLabel2: MyLabelComponent; getText() { console.log(this.myLabel1.text); console.log(this.myLabel2.text); } }
<app-my-label #label1 text="abc"></app-my-label> <app-my-label #label2 text="def"></app-my-label>
import { Component, Input } from '@angular/core'; @Component({ selector: 'app-my-label', templateUrl: './my-label.component.html', styleUrls: ['./my-label.component.css'] }) export class MyLabelComponent { constructor() { } @Input('text') text: string; }MyLabel コンポーネント (HTML テンプレート)
<p> my-label works! {{text}} </p>
<app-my-label text="abc"></app-my-label>
public class Startup { ... // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env) { // 追加 app.UseCors(builder => builder .WithOrigins("http://localhost:4200") .AllowAnyHeader() .AllowAnyMethod()); if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. app.UseHsts(); } app.UseHttpsRedirection(); app.UseMvc(); } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms';//追加 import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule//追加 ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
<input type="text" [(ngModel)]="name"> {{name}}
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; name = 'sasaki';//追加 }