Question

我是一个有角度的2初学者。

我目前有一个像这样的自定义按钮组件......

import matplotlib.pyplot as plt
from matplotlib import cm
from mpl_toolkits.mplot3d import Axes3D
import numpy as np

u = np.linspace(0, 2 * np.pi, 12)
v = np.linspace(0, np.pi,15)
x =  np.outer(np.cos(u), np.sin(v))
y =  np.outer(np.sin(u), np.sin(v))
z =  np.outer(np.ones(np.size(u)), np.cos(v))
F = np.sin(x)*y + z
F = (F-F.min())/(F-F.min()).max()

#Set colours and render
fig = plt.figure(figsize=(8,4))
fig.subplots_adjust(top=1, bottom=0, left=0, right=1, wspace=0)
ax = fig.add_subplot(121, projection='3d')
ax2 = fig.add_subplot(122, projection='3d')

# plotting a sphere with radius 1. 
# Naturally, setting the limits to 1 makes sense
ax.plot_surface(x,y,z,  rstride=1, cstride=1, facecolors=cm.jet(F), alpha=0.5)
ax.set_xlim(np.array([-1,1]))
ax.set_ylim(np.array([-1,1]))
ax.set_zlim(np.array([-1,1]))

# plotting a sphere with radius 1. 
# but now reducing the limits
ax2.plot_surface(x,y,z,  rstride=1, cstride=1, facecolors=cm.jet(1-F), alpha=0.5) 
ax2.set_xlim(np.array([-1,1])*.57)
ax2.set_ylim(np.array([-1,1])*.57)
ax2.set_zlim(np.array([-1,1])*.57)

#ax.axis('off') # turned on to see the effect. Turn off to have a nice image.
plt.show()

我正在

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

@Component({
    selector: 'my-button',
    template: `
    <button md-button>{{buttonText}}</button>
    `,
})

export class MyButtonComponent {

    buttonText: string;

    constructor(){
        this.buttonText = 'abc'
    }
}

中使用的

：

AppComponent

到目前为止一切顺利。按钮显示'abc'。

有什么方法可以指定我说<my-button></my-button>的按钮文字吗？我的意思是

<my-button>

有没有办法配置这种行为？我见过的所有例子都显示了从孩子到父母的变量流（可以这么说），但从来没有反过来。

任何帮助将不胜感激。感谢。

Answer 1

您可以使用Input来预期来自父组件的值。您只需将Input装饰器放在buttonText属性上。

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

@Component({
    selector: 'my-button',
    template: `
    <button md-button>{{buttonText}}</button>
    `,
})
export class MyButtonComponent {

    @Input() buttonText: string;

    constructor(){
    }
}

简单组件的演示包装器

1 个答案: