При использовании селектор для связывания с @Input, его шаблон виден в любом другом компоненте - PullRequest
Новая
       23

При использовании селектор для связывания с @Input, его шаблон виден в любом другом компоненте

0 голосов
/ 29 января 2020

child.component 

selector: 'app-child',
  template: `
            <div class="container">
            <div class="table">
              <thead class="thead-light">
                <tr>
                  <th>Name</th> <th>Paswword</th>
                </tr>
              </thead>
              <tbody *ngFor="let info of loginInfo">
                <tr>
                  <td>{{info.name}}</td>
                  <td>{{info.password}}</td>
                </tr>
              </tbody>
            </div>
          </div>`,
  styleUrls: ['./child.component.css'],
  // encapsulation: ViewEncapsulation.None // ** nome, shadowdom, native
})
export class ChildComponent implements OnInit {
  @Input() loginInfo: { name: string, password: string };

app.component 

 selector: 'app-root',
  template: ` <app-child [loginInfo]="loginDetails"></app-child> `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'lifecycle';
  loginDetails = [
    { name: 'qwe', password: '123' },
    { name: 'rty', password: 'pom@123' },
  ];
}

При связывании @Input () с помощью дочернего тега селектора шаблон дочернего компонента отображается во всех остальных компонентах. Есть ли способ, который будет показан только в дочернем компоненте?

Ответы [ 2 ]

0 голосов
/ 29 января 2020

Вы можете использовать другой комп onet, чтобы связать переменную @Input. например:

1) AppComponent = компонент Paraent.

2) создать комп onet (BillComponent) и затем определить шаблон:

<app-child [loginInfo]="loginDetails"></app-child>, внутри него

3) создать маршрут для BillComponent: 

{path: 'generate-bill', component: BillComponent},

внутри app-routing.module.ts

4) Теперь файл billComponent.ts выглядит следующим образом: 

selector: 'app-bill',
  template: ` <app-child [loginInfo]="loginDetails"></app-child> `,
  styleUrls: ['./bill.component.css']
})
export class BillComponent {
  title = 'lifecycle';
  loginDetails = [
    { name: 'qwe', password: '123' },
    { name: 'rty', password: 'pom@123' },
  ];
}

5) дочерний компонент будет таким же, как вы указали в своем коде.

Примечание. Проверьте поток компонента. .like par enet, родной или дочерний компонент.

0 голосов
/ 29 января 2020

Компонент приложения является общим для всех компонентов, поэтому, если в его представлении шаблона вы вставите селектор компонента, все остальные компоненты увидят его; Если вы хотите, чтобы другие компоненты не видели дочерний шаблон, вы не должны вставлять его в шаблон компонента приложения.

Вы должны создать другой компонент, в который нужно поместить селектор app-child, а затем вызвать его, когда приложение Компонент загружен.

В компоненте-маршрутизация приложения -module 

const routes: Routes = [

  {
    path: 'newComponent',
    loadChildren: () => import('app/newComponent/newComponent.module')
      .then(m => m.NewComponentModule),
  }
]

Таким образом, когда компонент приложения загружается автоматически, новый компонент загружается

...