Когда мне следует определять дочерний компонент в угловых модулях вместо использования селекторов в родительском компоненте?

Question

Я не мог понять, зачем нам нужен дочерний компонент в Angular?

Потому что мы можем использовать селекторы и мы можем получить представление о других компонентах.Итак, когда нам понадобится определить дочерние элементы в определениях маршрутизации в app.module?

В чем разница кода выше и кода ниже в аспекте определения дочерних элементов и навигации?

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
        } 
........

и в ** parent-component.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 в зависимости от посещенного URL.В этом случае вам нужен маршрутизатор и используйте:

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

с правильными определениями маршрутов.

Answer 2

простой пример:
У меня есть проект (панель администратора)
и я использую фильтр даты в каждом списке
поэтому я создам общий компонент date-filter.component.ts
и я буду использовать его в каждом компоненте без повторения кода

дата-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)
    }
  }
}

дата-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>

основной component.html

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