3 Câu hỏi: Làm thế nào để ẩn / hiển thị một thành phần theo thành phần hiện tại?

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM
MainComponent được tải trong <router-outlet> của tôi, ở cấp độ này, cả menufooter đều được hiển thị. Tôi muốn CHỈ xuất hiện khi tôi ở bất kỳ thành phần nào KHÔNG MainComponent trong trường hợp của tôi trong AnotherComponent sẽ được hiển thị . Tôi có thể làm cái này như thế nào? Tôi đã thử với MainComponent và nó không hoạt động với tôi (tôi nghĩ rằng nó vượt xa điều này)

đây là một phần mã của tôi:

ngIf

<menu (setAnimal)='setAnimal($event)' ></menu>
<router-outlet (activate)='onActivate($event)'></router-outlet>

đây là mã trực tiếp của tôi:

https://stackblitz.com/edit/angular-qcxnln

cảm ơn

    
0
3 Câu trả lời                              3                         

Nếu tôi hiểu rõ, nếu bạn tiêm bộ định tuyến vào AppComponent của mình:

@Component({
  selector: 'main',
  template: '<div><a routerLink="/another">anotherComponent</a></div>',
  styles: [`div {
      position: fixed;
      min-width: 100%;
      background-image: url("https://source.unsplash.com/1920x1080?stars") !important;
      background-repeat: no-repeat;
      background-size: 100%;
    background-position: center;
      background-size: cover;
}`]
})

  @Component({
    selector: 'another',
    template: '<div><a routerLink="/">main</a></div>',
    styles: [`div {
      position: fixed;
      min-width: 100%;
      background-image: url("https://source.unsplash.com/1920x1080?landscape") !important;
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center;
      background-size: cover;
      }`]
  })

Bạn có thể đăng ký các sự kiện tuyến đường và vì vậy hãy kiểm tra xem bạn có đang ở trong đường dẫn gốc hay không. Sau đó, với một vài ngNếu:

constructor(private router: Router){
    router.events.subscribe(e => {
    if(e instanceof NavigationEnd){
      if(e.urlAfterRedirects != '/'){
        this.headerFooterVisible= true;
      }else{
        this.headerFooterVisible= false;
      }

    }
  });

StackBlitz

    
2
2019-05-10 05: 49: 04Z
  1. cảm ơn, nó gần như hoạt động, nhưng nếu tôi quay lại MainComponent, chân trang và menu được tải .. chúng sẽ không bao giờ được tải trong MainComponent
    2019-05-08 16: 43: 24Z

lấy tên thành phần trong

<menu (setAnimal)='setAnimal($event)' *ngIf="headerFooterVisible"></menu>
<router-outlet (activate)='onActivate($event)'></router-outlet>
<footer *ngIf="headerFooterVisible"></footer>
hook của onActivate bằng router-outlet và so sánh tương ứng.

mẫu làm việc = https://stackblitz.com/edit/angular-r8pnot     

0
2019-05-08 16: 48: 24Z

bạn có thể đặt Menu và Footer trong Thành phần khác, biến nó thành một mẫu trang. Đối với các trang bạn muốn hiển thị như Thành phần khác (menu hiển thị và chân trang), hãy sử dụng 'trẻ em'

obj.constructor.name     
0
2019-05-08 17: 47: 52Z
 const appRoutes: Routes = [
    { path: '', component: MainComponent },
    { 
      path: 'another',
      component: AnotherComponent,
      children: [
         path: 'something',
         component: SomeComponent
      ]
  }
];
nguồn đặt đây