angular - 如何在 Angular 中创建一个简单的主机组件？

Question

我是 Angular 新手，我正在阅读 https://angular.io/guide/template-syntax#interpolation-

<!-- "The sum of 1 + 1 is not 4" -->
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}.</p>

我有组件product-list有

文件product-list.component.html

<h2>Products</h2>

<div *ngFor="let product of products">
  <h3><a [title]="product.name + ' details'">{{product.name}}</a></h3>
  <p *ngIf="product.description">Description: {{product.description}}</p>
  <button (click)="share()">Share</button>
  <p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}.</p>
</div>

文件product-list.component.ts

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

import {products} from '../products';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
  products = products;

  share() {
    window.alert('The product has been shared!');
  }
}

如何创建getVal()主机组件？

Answer 1

只需在组件中声明该方法

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

import {products} from '../products';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
  products = products;

  share() {
    window.alert('The product has been shared!');
  }

  getVal() {
     // DO YOUR WORK
  }
}