Diferencia entre revisiones de «Xulla Angular»
Ir a la navegación
Ir a la búsqueda
(Página creada con «== Rutes == Fitxer: '''app-routing.module.ts ''' Etiqueta: '''<router-outlet>''' Rutes amb #: '''imports: [RouterModule.forRoot(routes, { useHash: true })],''' Exemple…») |
Sin resumen de edición |
||
Línea 31: | Línea 31: | ||
detailsProduct(id: number): void{ this.router.navigate(['/product', id]); } | detailsProduct(id: number): void{ this.router.navigate(['/product', id]); } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== Servicis HTTP == | |||
En app.module.ts, en imports: HttpClientModule i importat de: import { HttpClientModule } from '@angular/common/http'; | |||
Exemple bàsic: | |||
<syntaxhighlight lang="javascript" style="font-family:monospace"> | <syntaxhighlight lang="javascript" style="font-family:monospace"> | ||
constructor(private http: HttpClient) { } | |||
getProducts(): Observable<Product[]>{ | |||
return this.http.get<{products: Product[]}>(this.productURL).pipe( | |||
map(response => response.products) | |||
); | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> |
Revisión del 20:04 22 feb 2022
Rutes
Fitxer: app-routing.module.ts
Etiqueta: <router-outlet>
Rutes amb #: imports: [RouterModule.forRoot(routes, { useHash: true })],
Exemple:
const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'planets', canActivate: [AuthGuard], component: PlanetListComponent},
{path: 'suns', canActivate: [AuthGuard], component: SunComponent},
{path: 'planet/:id', canActivate: [AuthGuard], component: PlanetDetailComponent},
{path: 'planet/edit/:id', canActivate: [AuthGuard],
resolve: {planet: PlanetResolveService},
component: PlanetEditComponent},
{path: 'login', component: LoginComponent},
{path: '**', pathMatch: 'full', redirectTo: 'home'}
];
Cridar a les rutes: <a class="nav-link active" aria-current="page" [routerLink]="['home']" [routerLinkActive]="['active']">Home</a>
Cridar a les rutes per codi:
import { Router } from '@angular/router';
constructor( private router: Router ) {}
detailsProduct(id: number): void{ this.router.navigate(['/product', id]); }
Servicis HTTP
En app.module.ts, en imports: HttpClientModule i importat de: import { HttpClientModule } from '@angular/common/http';
Exemple bàsic:
constructor(private http: HttpClient) { }
getProducts(): Observable<Product[]>{
return this.http.get<{products: Product[]}>(this.productURL).pipe(
map(response => response.products)
);
}