اگر ویژگی BreadCrumb به قسمتی اعمال شود، در لیست نهایی وجود خواهد داشت و یا برعکس اگر بر روی قسمتی اعمال نشود، در لیست نهایی ذکر نمیشود.
نظرات مطالب
npm install @ghalamborm/bootstrap4-rtl
import { Injectable } from '@angular/core'; import { CanActivate } from '@angular/router'; @Injectable() export class AuthGuard implements CanActivate { canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { } }
>ng g guard user/auth -m user/user.module
installing guard create src\app\user\auth.guard.spec.ts create src\app\user\auth.guard.ts update src\app\user\user.module.ts
import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate, Router } from '@angular/router'; import { AuthService } from './auth.service'; @Injectable() export class AuthGuard implements CanActivate { constructor(private authService: AuthService, private router: Router) { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { return this.checkLoggedIn(state.url); } checkLoggedIn(url: string): boolean { if (this.authService.isLoggedIn()) { return true; } this.authService.redirectUrl = url; this.router.navigate(['/login']); return false; } }
export class AuthService { currentUser: IUser; redirectUrl: string;
export class AuthGuard implements CanActivate { canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
isLoggedIn(): boolean { return !this.currentUser; }
import { AuthGuard } from './../user/auth.guard'; const routes: Routes = [ { path: 'products', canActivate: [ AuthGuard ], children: [ ] } ];
if (this.authService.login(userName, password)) { if (this.authService.redirectUrl) { this.router.navigateByUrl(this.authService.redirectUrl); } else { this.router.navigate(['/products']); } }
>ng g guard product/ProductEdit -m product/product.module
installing guard create src\app\product\product-edit.guard.spec.ts create src\app\product\product-edit.guard.ts update src\app\product\product.module.ts
export class ProductEditGuard implements CanDeactivate<ProductEditComponent> { canDeactivate(component: ProductEditComponent): boolean {
get product(): IProduct { return this.currentProduct; } set product(value: IProduct) { this.currentProduct = value; // Clone the object to retain a copy this.originalProduct = Object.assign({}, value); } get isDirty(): boolean { return JSON.stringify(this.originalProduct) !== JSON.stringify(this.currentProduct); }
import { Injectable } from '@angular/core'; import { CanDeactivate } from '@angular/router'; import { ProductEditComponent } from './product-edit/product-edit.component'; @Injectable() export class ProductEditGuard implements CanDeactivate<ProductEditComponent> { canDeactivate(component: ProductEditComponent): boolean { if (component.isDirty) { let productName = component.product.productName || 'New Product'; return confirm(`Navigate away and lose all changes to ${productName}?`); } return true; } }
import { ProductEditGuard } from './product-edit.guard'; const routes: Routes = [ { path: 'products', canActivate: [ AuthGuard ], children: [ { path: '', component: ProductListComponent }, { path: ':id', component: ProductDetailComponent, resolve: { product: ProductResolverService } }, { path: ':id/edit', component: ProductEditComponent, resolve: { product: ProductResolverService }, canDeactivate: [ ProductEditGuard ], children: [ { path: '', redirectTo: 'info', pathMatch: 'full' }, { path: 'info', component: ProductEditInfoComponent }, { path: 'tags', component: ProductEditTagsComponent } ] } ] } ];
reset(): void { this.dataIsValid = null; this.currentProduct = null; this.originalProduct = null; }
onSaveComplete(message?: string): void { if (message) { this.messageService.addMessage(message); } this.reset(); // Navigate back to the product list this.router.navigate(['/products']); }
ng g c Loginlayout
ng g c homelayout
<div style="width: 100%;height: 250px;background-color: aquamarine"> <h1>Header</h1> </div> <router-outlet></router-outlet> <div style="width: 100%;height: 250px;background-color: brown"> <h1>Foother</h1> </div>
export const routes: Routes = [ { path: 'Loginlayout', component: LoginlayoutComponent , children: [ { path: 'Login', component: LoginComponent, pathMatch: 'full'} ] }, { path: 'Homelayout', component: HomelayoutComponent, children: [ { path: 'About', component: AbouComponent, pathMatch: 'full'}, { path: 'Home', component: HomeComponent, pathMatch: 'full'} ] } ];
path: '', component: HomelayoutComponent, children: [ { path: '', component:HomeComponent, pathMatch: 'full'} ]
import React, { Component } from 'react'; import {useParams,useNavigate,useLocation} from 'react-router-dom'; import { useEffect } from 'react'; const TestRoute=(props)=>{ const navigate=useNavigate(); const location=useLocation() const params=useParams(); const {id,name}=useParams(); useEffect(()=>{ console.log(location.search); },[]) const gotosfc=()=>{ navigate("/sfc",{replace:true}); } return( <> <strong>Id :</strong> {id} <br/> <strong>Name :</strong> {name} <br/> <button onClick={()=>gotosfc()}>Go to SFC</button> </> ) } export default TestRoute;
<Route path="/product/edit/:id/:name" element={<TestRoute />} />
<Route path="/product/edit/:id" element={<TestRoute />} /> <Route path="/product/edit/:id/:name" element={<TestRoute />} />
import React, { Component } from "react"; class TableHeader extends Component { raiseSort = path => { console.log("raiseSort", path); const sortColumn = { ...this.props.sortColumn }; if (sortColumn.path === path) { sortColumn.order = sortColumn.order === "asc" ? "desc" : "asc"; } else { sortColumn.path = path; sortColumn.order = "asc"; } this.props.onSort(sortColumn); }; render() { return ( <thead> <tr> {this.props.columns.map(column => ( <th onClick={() => this.raiseSort(column.path)}>{column.label}</th> ))} </tr> </thead> ); } } export default TableHeader;
import TableHeader from "./common/tableHeader";
columns = [ { path: "title", label: "Title" }, { path: "genre.name", label: "Genre" }, { path: "numberInStock", label: "Stock" }, { path: "dailyRentalRate", label: "Rate" }, {}, {} ];
render() { const { movies, onDelete, onLike, onSort, sortColumn } = this.props; return ( <table className="table"> <TableHeader columns={this.columns} sortColumn={sortColumn} onSort={onSort} /> <tbody>
index.js:1375 Warning: Each child in a list should have a unique "key" prop. Check the render method of `TableHeader`. See https://fb.me/react-warning-keys for more information.
class MoviesTable extends Component { columns = [ { path: "title", label: "Title" }, { path: "genre.name", label: "Genre" }, { path: "numberInStock", label: "Stock" }, { path: "dailyRentalRate", label: "Rate" }, { key: "like" }, { key: "delete" } ];
render() { return ( <thead> <tr> {this.props.columns.map(column => ( <th key={column.path || column.key} style={{ cursor: "pointer" }} onClick={() => this.raiseSort(column.path)} > {column.label} </th> ))} </tr> </thead> );
import React, { Component } from "react"; class TableBody extends Component { render() { const { data, columns } = this.props; return ( <tbody> {data.map(item => ( <tr> {columns.map(column => ( <td></td> ))} </tr> ))} </tbody> ); } } export default TableBody;
{movies.map(movie => ( <tr key={movie._id}> <td>{movie.title}</td>
<td>{item[column.path]}</td>
getPropValue(obj, path) { if (!path) { return obj; } const properties = path.split("."); return this.getPropValue(obj[properties.shift()], properties.join(".")); }
<td>{getPropValue(item, column.path)}</td>
class MoviesTable extends Component { columns = [ { path: "title", label: "Title" }, { path: "genre.name", label: "Genre" }, { path: "numberInStock", label: "Stock" }, { path: "dailyRentalRate", label: "Rate" }, { key: "like", content: movie => ( <Like liked={movie.liked} onClick={() => this.props.onLike(movie)} /> ) }, { key: "delete", content: movie => ( <button onClick={() => this.props.onDelete(movie)} className="btn btn-danger btn-sm" > Delete </button> ) } ];
renderCell = (item, column) => { if (column.content) { return column.content(item); } return this.getPropValue(item, column.path); }; createKey = (item, column) => { return item._id + (column.path || column.key); }; render() { const { data, columns } = this.props; return ( <tbody> {data.map(item => ( <tr key={item._id}> {columns.map(column => ( <td key={this.createKey(item, column)}> {this.renderCell(item, column)} </td> ))} </tr> ))} </tbody> ); }
//... import TableBody from "./common/tableBody"; //... class MoviesTable extends Component { // ... render() { const { movies, onSort, sortColumn } = this.props; return ( <table className="table"> <TableHeader columns={this.columns} sortColumn={sortColumn} onSort={onSort} /> <TableBody columns={this.columns} data={movies} /> </table> ); } }
renderSortIcon = column => { const { sortColumn } = this.props; if (column.path !== sortColumn.path) { return null; } if (sortColumn.order === "asc") { return <i className="fa fa-sort-asc" />; } return <i className="fa fa-sort-desc" />; };
{column.label} {this.renderSortIcon(column)}
import TableBody from "./tableBody"; import TableHeader from "./tableHeader";
import TableBody from "./tableBody"; import TableHeader from "./tableHeader"; class Table extends Component { render() { const { columns, sortColumn, onSort, data } = this.props; return ( <table className="table"> <TableHeader columns={columns} sortColumn={sortColumn} onSort={onSort} /> <TableBody columns={columns} data={data} /> </table> ); } } export default Table;
//... import Table from "./common/table"; class MoviesTable extends Component { //... render() { const { movies, onSort, sortColumn } = this.props; return ( <Table columns={this.columns} sortColumn={sortColumn} onSort={onSort} data={movies} /> ); } }
public interface IBakery { string Bake(); double GetPrice(); } public class Cake: IBakery { public string Bake() { return "Cake baked"; } public double GetPrice() { return 2000; } } public class Bread: IBakery { public string Bake() { return "Bread baked"; } public double GetPrice() { return 100; } }
public abstract class Decorator : IBakery { private readonly IBakery _bakery; protected string bake = "N/A"; protected double price = -1; protected Decorator(IBakery bakery) { _bakery= bakery; } public virtual string Bake() { return _bakery.Bake() + "/" + bake; } public double GetPrice() { return _bakery.GetPrice() + price; } } public class Type1 : Decorator { public Type1(IBakery bakery) : base(bakery) { bake= "Type 1"; price = 1; } } public class Type2 : Decorator { private const string bakeType = "special baked"; public Type2(IBakery bakery) : base(bakery) { name = "Type 2"; price = 2; } public override string Bake() { return base.Bake() + bakeType ; } }
Cake cc1 = new Cake(); Console.WriteLine(cc1.Bake() + " ," + cc1.GetPrice()); Type1 cd1 = new Type1 (cc1); Console.WriteLine(cd1.Bake() + " ," + cd1.GetPrice()); Type2 cd2 = new Type2(cc1); Console.WriteLine(cd2.Bake() + " ," + cd2.GetPrice());
{ path: 'products', loadChildren:'app/product/product.module#ProductModule' },
const routes: Routes = [ { path: 'home', component: WelcomeComponent }, { path: 'welcome', redirectTo: 'home', pathMatch: 'full' }, { path: 'products', loadChildren: 'app/product/product.module#ProductModule' }, { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ];
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 165 kB {4} [initial] chunk {1} main.bundle.js, main.bundle.js.map (main) 32.7 kB {3} [initial] [rendered] chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 129 kB {4} [initial] chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.72 MB [initial] [rendered] chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] chunk {5} 5.chunk.js, 5.chunk.js.map 51.1 kB {1} [rendered]
const routes: Routes = [ { path: 'products', canActivate: [ AuthGuard ], children: [ ] } ];
import { AuthGuard } from './user/auth.guard'; const routes: Routes = [ { path: 'home', component: WelcomeComponent }, { path: 'welcome', redirectTo: 'home', pathMatch: 'full' }, { path: 'products', loadChildren: 'app/product/product.module#ProductModule', canActivate: [AuthGuard] }, { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ];
const routes: Routes = [ { path: '', component: ProductListComponent }, { path: ':id', component: ProductDetailComponent, resolve: { product: ProductResolverService } }, { path: ':id/edit', component: ProductEditComponent, resolve: { product: ProductResolverService }, canDeactivate: [ProductEditGuard], children: [ { path: '', redirectTo: 'info', pathMatch: 'full' }, { path: 'info', component: ProductEditInfoComponent }, { path: 'tags', component: ProductEditTagsComponent } ] } ];
import { ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate, Router, CanLoad, Route } from '@angular/router'; @Injectable() export class AuthGuard implements CanActivate, CanLoad { canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { return this.checkLoggedIn(state.url); } canLoad(route: Route): boolean { return this.checkLoggedIn(route.path); } // … the same as before }
{ path: 'products', loadChildren: 'app/product/product.module#ProductModule', canLoad: [AuthGuard] },
import { Routes, RouterModule, PreloadAllModules } from '@angular/router'; @NgModule({ imports: [RouterModule.forRoot( routes, { enableTracing: true, preloadingStrategy: PreloadAllModules /*, useHash: true*/ } )],
>ng g s SelectiveStrategy -m app.module
installing service create src\app\selective-strategy.service.spec.ts create src\app\selective-strategy.service.ts update src\app\app.module.ts
import { Injectable } from '@angular/core'; import { Route, PreloadingStrategy } from '@angular/router'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/of'; @Injectable() export class SelectiveStrategyService implements PreloadingStrategy { preload(route: Route, load: Function): Observable<any> { if (route.data && route.data['preload']) { return load(); } return Observable.of(null); } }
import { SelectiveStrategyService } from './selective-strategy.service'; @NgModule({ imports: [RouterModule.forRoot( routes, { enableTracing: true, preloadingStrategy: SelectiveStrategyService /*, preloadingStrategy: PreloadAllModules*/ /*, useHash: true*/ } )],
{ path: 'products', loadChildren: 'app/product/product.module#ProductModule', //canLoad: [AuthGuard] canActivate: [AuthGuard], data: { preload: true } },
> ng new angular-routing --routing
>ng g c dashboard >ng g c customer
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { DashboardComponent } from './dashboard/dashboard.component'; import { CustomerComponent } from './customer/customer.component'; const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'dashboard' }, { path: 'dashboard', component: DashboardComponent }, { path: 'customer', component: CustomerComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
@NgModule({ declarations: [ AppComponent, DashboardComponent, CustomerComponent ],
<h1> {{title}} </h1> <nav> <ul> <li><a href="" [routerLink]="['/dashboard']">Dashboard</a></li> <li><a href="" [routerLink]="['/customer']">Customer</a></li> </ul> </nav> <router-outlet></router-outlet>
> ng serve -o
> ng g module admin
> ng g m admin --routing
> ng g c admin
> ng g c admin/email installing component create src\app\admin\email\email.component.css create src\app\admin\email\email.component.html create src\app\admin\email\email.component.spec.ts create src\app\admin\email\email.component.ts update src\app\admin\admin.module.ts
@NgModule({ imports: [ CommonModule, AdminRoutingModule ], declarations: [AdminComponent, EmailComponent] }) export class AdminModule { }
import { AdminModule } from './admin/admin.module'; @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, AdminModule, AppRoutingModule ],
import { AdminComponent } from './admin.component'; import { EmailComponent } from './email/email.component'; const routes: Routes = [ { path: 'admin', component: AdminComponent, children:[ { path:'', component:EmailComponent }, { path:'email', component:EmailComponent } ] } ];
<p> admin works! </p> <router-outlet></router-outlet>
>ng g guard auth