Detaillierte Erläuterung der Angular-Strukturdirektivenmodule und -Stile

<ng-template [ngIf]="Artikel.Erinnerung">
      <Mat-Symbol>
        Alarm
      </mat-Symbol>
    </ng-Vorlage>
    
    <!-- <mat-icon *ngIf="item.reminder">
      Alarm
    </mat-icon> -->

Konstruktor (Wächter: beliebig, Router: Router);
    /**
     * Erstellt ein Modul mit allen Router-Providern und -Direktiven. Es richtet optional auch ein
     * Anwendungslistener zur Durchführung einer ersten Navigation.
     *
     * Optionen (siehe „ExtraOptions“):
     * * „enableTracing“ bewirkt, dass der Router alle seine internen Ereignisse in der Konsole protokolliert.
     * * `useHash` aktiviert die Standortstrategie, die das URL-Fragment anstelle des Verlaufs verwendet
     * API.
     * * „initialNavigation“ deaktiviert die anfängliche Navigation.
     * * „errorHandler“ bietet einen benutzerdefinierten Fehlerhandler.
     * * „preloadingStrategy“ konfiguriert eine Vorladestrategie (siehe „PreloadAllModules“).
     * * `onSameUrlNavigation` konfiguriert, wie der Router die Navigation zur aktuellen URL handhabt. Siehe
     * „ExtraOptions“ für weitere Einzelheiten.
     * * `paramsInheritanceStrategy` definiert, wie der Router Parameter, Daten und aufgelöste Daten zusammenführt
     * von übergeordneten zu untergeordneten Routen.
     */
    statisch für Root (Routen: Routen, Konfiguration?: ExtraOptionen): ModuleWithProviders<RouterModule>;
    /**
     * Erstellt ein Modul mit allen Router-Direktiven und einem Provider, der Routen registriert.
     */
    statisch für Kind (Routen: Routen): ModuleWithProviders<RouterModul>;
}

importiere { NgModule } von '@angular/core';
importiere { CommonModule } von '@angular/common';

@NgModule({
  Deklarationen: [],
  Importe: [
    Gemeinsames Modul
  ]
})
exportiere Klasse ServicesModule { }

importiere { NgModule, ModuleWithProviders } von '@angular/core';
importiere { CommonModule } von '@angular/common';

@NgModule()
exportiere Klasse ServicesModule { 
  statisch fürRoot():ModuleMitProvidern{
    zurückkehren {
      ngModule: DiensteModul,
      Anbieter:[]
    }
  }
}

<mat-list-item class="container" [@item]="widerPriority" [ngClass]="{
  'Priorität-normal':Element.Priorität===3,
  'Priorität wichtig':item.priority===2,
  „Notfallpriorität“:item.priority===1
}"

<div Klasse = "Inhalt" mat-line [Klasse.abgeschlossen] = "Element.abgeschlossen">
    <span [matTooltip]="item.desc">{{item.desc}}</span>
</div>

<app-task-list *ngFor="Liste der Listen veröffentlichen" 
  Klasse="Listencontainer"
  app-droppable="true"
  [dropTags]="['Aufgabenelement','Aufgabenliste']"
  [dragEnterClass]="'ziehen-eingeben'"
  [app-draggable]="wahr"
  [dragTag]="'Aufgabenliste'"
  [draggedClass]="'ziehen-starten'"
  [dragData]="Liste"
  (gelöscht)="handleMove($event,list)"
  [ngStyle]="{'Reihenfolge': Liste.Reihenfolge}"
  >

Listen = [
    {
      ID: 1,
      Name: "Aufgaben",
      Bestellung: 1,
      Aufgaben:
        {
          ID: 1,
          desc: "Aufgabe 1: Gehe zu Starbucks, um Kaffee zu kaufen",
          abgeschlossen: wahr,
          Priorität: 3,
          Eigentümer:
            ID: 1,
            Name: "Zhang San",
            Avatar: „avatars:svg-11“
          },
          Fälligkeitsdatum: neues Datum(),
          Erinnerung: neues Datum()
        },
        {
          ID: 2,
          desc: „Aufgabe 1: Erledigen Sie die vom Chef zugewiesene PPT-Aufgabe“,
          abgeschlossen: falsch,
          Priorität: 2,
          Eigentümer:
            ID: 2,
            Name: "Li Si",
            Avatar: „avatare:svg-12“
          },
          Fälligkeitsdatum: neues Datum()
        }
      ]
    },
    {
      ID: 2,
      Name: "In Bearbeitung",
      Bestellung:2,
      Aufgaben:
        {
          ID: 1,
          desc: "Aufgabe 3: Überprüfung des Projektcodes",
          abgeschlossen: falsch,
          Priorität: 1,
          Eigentümer:
            ID: 1,
            Name: "Wang Wu",
            Avatar: „avatare:svg-13“
          },
          Fälligkeitsdatum: neues Datum()
        },
        {
          ID: 2,
          desc: "Aufgabe 1: Einen Projektplan entwickeln",
          abgeschlossen: falsch,
          Priorität: 2,
          Eigentümer:
            ID: 2,
            Name: "Li Si",
            Avatar: „avatare:svg-12“
          },
          Fälligkeitsdatum: neues Datum()
        }
      ]
    }
  ];

handleMove(Quellendaten,Zielliste){
    Schalter (srcData.tag) {
      Fall ‚Aufgabenelement‘:
        console.log('Element wird behandelt');
        brechen;
      Fall „Aufgabenliste“:
        console.log('Liste behandeln');
        const srcList = srcData.data;
        const tempOrder = srcList.order;
        srcList.order = zielList.order;
        Zielliste.Reihenfolge = temporäre Reihenfolge;
      Standard:
        brechen;
    }
  }