虽然使用 选择器与@Input绑定，但它的模板在每个其他组件中都可见

Question

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（）时，子组件模板会显示在所有其他组件中。是否有任何方法只能在子组件中显示？

Answer 1

App组件在所有组件之间共享，因此，如果在其模板视图中插入组件选择器，则所有其他组件都将看到它；如果要其他组件看不到子模板，则必须请勿将其插入应用程序组件模板中。