从模板中的 Angular 4.5 组件获取值

Question

我正在开发 Angular 4.5，其中我有包含其组件、模板和服务的自包含文件夹。我有方法可注射服务

服务

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

@Injectable()
 export class MsalService
{
   getProduct(): string
   {
      return "12 Apples";
   }
 }

我打算在其中调用此服务并将值从 getProduct() 打印到模板中的组件；

登录组件

 import { Component } from '@angular/core';
 import { Location} from '@angular/common';
 import { MsalService } from '../Services/msal.service';

 @Component({
  selector: 'auth-login',
  templateUrl: './Login.Template.html',
  styleUrls: ['./Login.Style.scss'], 
  providers: [MsalService]
 })

  export class Login{

    constructor( private msalService: MsalService){
  }

  public pageTitle: string = "testing .....";

  getService() : void{
      this.msalService.getProduct();
  }

}

模板，当点击事件发生时，我试图从登录组件调用方法并在模板中打印值

登录模板

<div class="panel-heading">
     {{pageTitle}}
</div>

<a class="btn btn-link"  (click)="getService()">Login</a>

最后我需要在另一个组件中调用整个函数；

另一个模块

import { Login } from '../security/login/login.component';

@NgModule({
imports: [
 Login
  ]
})

 export class LayoutModule {
}

我想使用登录方法调用的另一个模板，它是单独的完整功能，简单来说，从方法打印值

getService() : void{
          this.msalService.getProduct();

 <p><auth-login></auth-login></p>

Answer 1

假设您需要打印值。

 getService(){
   return this.msalService.getProduct();
 }

或其他

yourProperty:string;

getService() : void{
      yourProperty = this.msalService.getProduct();
  }

模板

<html>
<p>{{ getService() }}</p>
</html>


<html>
 <p>{{ yourProperty }}</p>
</html>

Answer 2

这就是我在模板中打印组件方法 return 值的方式。

getService() : string{
       return this.msalService.getProduct();
  }

从模板中的 Angular 4.5 组件获取值

Get value from Angular 4.5 component in template

angular-services

angular

服务

登录组件

登录模板

另一个模块