我什么时候应该在 Angular 模块中定义子组件，而不是在父组件中使用选择器？

Question

我不明白为什么我们在 Angular 中需要子组件？

因为我们可以使用选择器，并且可以获取其他组件的视图。 那么我们什么时候需要在 app.module 的路由定义中定义子节点？

上面代码和下面代码在定义children和导航方面有什么区别？

parent-component.html

</div>  

<nested></nested>

</div>

child-component.ts

@Component({
  selector: 'nested',
  templateUrl: './nested-component.component.html',
  styleUrls: ['./nested-component-list.component.css']
})

如果我们可以在 app.module 上没有任何定义的情况下实现这一点（假设 2 个组件在同一个角度模块中 - 我有 app.module），那么使用 chidren 和定义子路由的目的是什么？

在 app.module 中

path: 'parent-component', //<---- parent component declared here
      component: ParentComponent,
      children: [ 
        {
          path: 'child-one',
          component: ChildComponent
        } 
........

并在 **父组件.html*

 <div>
    <router-outlet></router-outlet>
  </div>

在

**parent-component.ts**
this.m_Router.navigate(["/child-one"]

Answer 1

如果您已经知道主组件的子组件是哪个组件，那么您最好还是像以前那样放置 nested 组件。

当您静态地不知道将包含什么组件时，路由就会启动，这取决于访问的页面。

例如，你可以有你的页面：

<main-menu-and-page>
  <app-nested-page></app-nested-page>
</main-menu-and-page>

但app-nested-page 需要为home-page 或about-page，具体取决于访问的网址。在这种情况下，您需要路由器并使用：

<main-menu-and-page>
  <router-outlet></router-outlet>
</main-menu-and-page>

使用正确的路线定义。

Answer 2

简单示例：
我有一个项目（管理面板）
我在每个列表中都使用日期过滤器
所以我将创建一个共享组件 date-filter.component.ts
我将在每个组件中使用它而不重复代码

date-filter.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatDatepickerInputEvent } from '@angular/material';

interface IDate {
  label: string,
  fromDate: FormControl,
  toDate: FormControl
}

@Component({
  selector: 'app-date-filter',
  templateUrl: './date-filter.component.html',
  styleUrls: ['./date-filter.component.scss']
})
export class DateFilterComponent implements OnInit {

  minDate: Date;
  @Input() dateObject: IDate;
  constructor() { }
  maxDate: Date;
  ngOnInit() {
    this.maxDate = new Date();
  }

  /*
    Method For Detecting Filter From Date Change
  */
  dateChange(event: MatDatepickerInputEvent<Date>) {
    let dateValue = event.value;
    let minFromDate = new Date(dateValue);
    this.minDate = new Date(minFromDate.getFullYear(), minFromDate.getMonth(), minFromDate.getDate());
    this.dateObject.toDate.setValue('');

  }

  setToDate() {
    if (this.dateObject.toDate.value) {
      let to = new Date(this.dateObject.toDate.value);
      to.setHours(23);
      to.setMinutes(59);
      to.setSeconds(59);
      this.dateObject.toDate.setValue(to)
    }
  }
}

date-filter.component.html

  <h4>{{dateObject.label}}</h4>
      <div class="row">
        <div class="col-sm-6">
          <mat-form-field>
            <input matInput [max]="maxDate" [matDatepicker]="picker1" [formControl]="dateObject.fromDate" (click)="picker1.open()"
              (dateChange)="dateChange($event)" placeholder="From Date" readonly>
            <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
            <mat-datepicker #picker1></mat-datepicker>
          </mat-form-field>
        </div>
        <div class="col-sm-6">
          <mat-form-field>
            <input #toDate [max]="maxDate" matInput [formControl]="dateObject.toDate" (dateChange)="setToDate()" [min]="minDate"
              [matDatepicker]="picker2" (click)="picker2.open()" placeholder="To Date" readonly>
            <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
            <mat-datepicker #picker2></mat-datepicker>
          </mat-form-field>
        </div>
      </div>

ma​​in-component.html

<div class="col-sm-6">
        <app-date-filter [dateObject]="filterObject.registrationDate">
        </app-date-filter>
      </div>