HttpClient取得遠端資料

app.component內部subscribe未註冊，程式碼範例無法註冊使用

src/app/app-routing.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }

src/app/app.component.html

@@ -1,6 +1 @@
-<ng-container [appLimit]="userLimit">
-  <span>目前的權限：{{ userLimit }}</span>
-  <div class="item" *appLimitCase="'user'">這個區塊只有使用者看得到</div>
-  <div class="item" *appLimitCase="'admin'">這個區塊只有管理員看得到</div>
-  <div class="item">這個區塊全部使用者都看得到</div>
-</ng-container>
+<pre>{{ tasks | json }}</pre>

src/app/app.component.ts

@@ -1,12 +1,22 @@
+import { HttpResponse } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
 
-import { Component, ViewChild, OnInit } from '@angular/core';
+import { Task } from './task';
+import { TaskService } from './task.service';
 
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent {
-  userLimit = 'user';
+export class AppComponent implements OnInit {
+  tasks: Task[] = [];
+
+  constructor(private taskService: TaskService) {}
+
+  ngOnInit(): void {
+
+    this.taskService.getList().subscribe()
+    };
+  }
 
-}

src/app/app.module.ts

@@ -1,15 +1,12 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
-import { LimitDirective } from './limit.directive';
-import { LimitCaseDirective } from './limit-case.directive';
-
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
-  imports:      [ BrowserModule, FormsModule ],
-  declarations: [ AppComponent, LimitDirective, LimitCaseDirective ],
+  imports:      [ BrowserModule, HttpClientModule ],
+  declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

src/app/limit-case.directive.ts

@@ -1,27 +0,0 @@
-import { Directive, Host, Input, TemplateRef, ViewContainerRef } from '@angular/core';
-import { LimitDirective } from './limit.directive';
-
-@Directive({
-  selector: '[appLimitCase]'
-})
-export class LimitCaseDirective {
-
-  constructor(    private viewContainer: ViewContainerRef,
-    private templateRef: TemplateRef<Object>,
-    @Host() private limit: LimitDirective) {}
-  private hasView=false;
-  @Input()
-  set appLimitCase(value:string){
-    const condition = value ===this.limit.appLimit;
-    if(condition&&!this.hasView){
-      this.viewContainer.createEmbeddedView(
-        this.templateRef
-      );
-      this.hasView=true;
-    }else if(!condition && this.hasView)
-    {
-      this.viewContainer.clear();
-      this.hasView=false;
-    }
-  }
-}

src/app/limit.directive.ts

@@ -1,9 +0,0 @@
-import { Directive, Input } from '@angular/core';
-
-@Directive({
-  selector: '[appLimit]'
-})
-export class LimitDirective {
-  @Input() appLimit!:string;
-
-}

src/app/task.service.ts

@@ -0,0 +1,28 @@
+import { HttpResponse } from '@angular/common/http';
+import { HttpEvent } from '@angular/common/http';
+import { HttpEventType } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, tap } from 'rxjs';
+
+import { Task } from './task';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TaskService {
+  constructor(private httpClient: HttpClient) {}
+
+  getList(): Observable<HttpEvent<Task[]>> {
+    return this.httpClient
+      .get<Task[]>('assets/tasks.json', {
+        observe: 'events',
+        reportProgress: true,
+      })
+      .pipe(
+        tap((event) =>
+          console.log(`Http Event Type = ${HttpEventType[event.type]}`)
+        )
+      );
+  }
+}

src/app/task.ts

@@ -0,0 +1,4 @@
+export class Task {
+  subject!: string;
+  content!: string;
+}

src/assets/tasks.json

@@ -0,0 +1,6 @@
+[
+  {
+    "subject": "Task A",
+    "content": "Do something..."
+  }
+]