RouterOutlet trong Angular

Về định nghĩa và cách sử dụng router bạn có thể xem link cuối bài, trong bài này mình sẽ chia sẻ thêm về router-outlet.

Router-outlet được sử dụng để điều hướng (route) cho các path url trong ứng dụng của bạn. NgModule

RouterModule

Selectors

router-outlet

Properties

Property Description

@Output('activate')
activateEvents: EventEmitter<any>	
    
    
@Output('deactivate')
deactivateEvents: EventEmitter<any>	
    
    
isActivated: boolean	Read-only.
    
    
component: Object	Read-only.
    
    
activatedRoute: ActivatedRoute	Read-only.
    
    
activatedRouteData: Data	Read-only.

Các thành phần trong router-outlet

Template:

outlet #myTemplateVar="outlet"

Mô tả các dùng:

<router-outlet></router-outlet>
<router-outlet name='left'></router-outlet>
<router-outlet name='right'></router-outlet>

Với mỗi router-outlet , nó sẽ emit một active event mỗi khi một component mới được khởi tạo và một deactive event khi nó bị huỷ.

<router-outlet
  (activate)='onActivate($event)'
  (deactivate)='onDeactivate($event)'></router-outlet>

Và để hiểu rõ các thuộc tính của router-outlet, mình sẽ lấy ví dụ sau:

• Truy cập phương thức / biến của ChildCoponent từ ParentComponent

Ta có một component app root như sau:

@Component({
    selector: 'my-app',
    providers: [],
                  <router-outlet></router-outlet>`
})
export class AppComponent {

    constructor() {

    }
}

ChildComponent:

@Component({
    selector: 'child',
    providers: [],
    templateUrl: `<div>Hello World</div>`
})
export class ChildComponent {

    constructor() {

    }
    my_var: boolean;
    myFunction(){
        console.log('success');
    }

}

Ta sẽ set thuộc tính active trong router-outlet của ParentComponent như sau:

<div class="container">
    <router-outlet (activate)="onActivate($event)"></router-outlet>
  </div>


  onActivate(componentRef){
    console.log(componentRef.my_var);
    console.log(componentRef.myFunction());
  }

Như vậy, thông qua property active của router-outlet ta đã truy cập được các phương thức / biến của thành phần con một cách dễ dàng. Ngoài ra, còn có các thuộc tính khác được liệt kê như bên dưới.

Methods

ngOnDestroy()

Parameters There are no parameters.

Returns void

ngOnDestroy(): void

Parameters There are no parameters.

Returns void

ngOnInit()

ngOnInit(): void

Parameters There are no parameters.

Returns void

detach()

Được gọi khi RouteReuseStrategy detach subtree.

detach(): ComponentRef<any>

Parameters There are no parameters.

Returns ComponentRef<any>

attach() Được gọi khi RouteReuseStrategy re-attach một subtree đã được detach trước đó.

attach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute) Parameters ref ComponentRef activatedRoute ActivatedRoute

**deactivate() **

deactivate(): void

Parameters

There are no parameters.

Returns void

activateWith()

activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver)

Parameters

activatedRoute ActivatedRoute

resolver ComponentFactoryResolver

Tham khảo router: https://viblo.asia/p/co-ban-ve-router-trong-angular-2-63vKjn7yK2R