Свойство службы недоступно в component.html

Question

Мое намерение - создать модуль печати, как подробно описано в этой статье . Я получаю следующую ошибку при загрузке моего app.component.html:

AppComponent.html:1 ERROR TypeError: Cannot read property 'isPrinting' of undefined

App.component.html

<div [class.isPrinting]= "printService.isPrinting">
  <div style="text-align:center">
    <h1>
      Welcome to {{title}}!
    </h1>
     <button (click) ="onPrintReport()"> Print Report</button>     
     <router-outlet name='print"'></router-outlet>
  </div>
</div>

App.component.ts

import { Component } from '@angular/core';
import {PrintService} from './print.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'printer';
  constructor(public printServive: PrintService) {
    //console.log("Print:", this.printServive.isPrinting);
  }  
}

print.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({
    providedIn: 'root'
})
export class PrintService{
    isPrinting = false;

    constructor(private router: Router) {}   
}

style.css

/* You can add global styles to this file, and also import other style files */
@media print {
    .isPrinting > * { display: none; }
    .isPrinting app-print-layout { display: block; }
  }

Не могли бы вы дать мне знать, какие изменения я должен сделать, чтобы это работало?

Answer 1

Вы назвали свой сервис printServive вместо printService.Таким образом, служба не может быть найдена, поэтому вызов свойства этого неопределенного свойства вызывает эту ошибку.