Question

我有一个简单的按钮，应该将变量设置为字符串常量。变量在component.ts中声明，可以在模板中访问。

<button (click)="myVariable='all'" >Test</button>

在开发模式下一切正常，但是使用ng build --prod --aot会出现以下错误：

 Property 'all' does not exist on type 'GridComponent'

我做错了吗？

编辑：

我很清楚可以更改为函数调用setVariable('all')的可能性但是，我想知道为什么这个有效（数字）：

<button (click)="myVariable=1" >Test</button>

但这不起作用（字符串）

<button (click)="myVariable='all'" >Test</button>

再次感谢

Answer 1

在您的组件中：

function [H,R,T] = projectile(m,r,h,c,rho,theta0,v0,x0,y0,t0)
    g = 9.81
    A = %pi*r^2
    k = c*rho*A/2;

    for theta = theta0 + (0:15:75)
        v = v0*[cos(theta*%pi/180); sin(theta*%pi/180)];
        t = t0
        xy = [x0;y0]
        i = 1
        while xy(2,i) >= 0
            t(i+1) = t(i)+h;
            v = v + h*([0;-g] - k*norm(v)*v/m);
            xy(:,i+1) = xy(:,i) + h*v;
            i = i+1;
        end
        plot(xy(1,:), xy(2,:));
    end    

    R = xy(1,$) - xy(1,1);
    T = t($);
    H = max(xy(2,:))
endfunction

clf
[H,R,T] = projectile(1,0.1,0.001,2,1000,5,1,0,0,0)

在您的HTML中：

public myVariable: string;

public setVariable(): string {
   this.myVariable = 'all';
}

一种更好（更可重用）的方式是：

在您的组件中：

<button (click)="setVariable()">Test</button>

在您的HTML中：

public myVariable: string;

public setVariable(value: string): string {
   this.myVariable = value;
}

Answer 2

内置于angular中的产品希望在组件中声明的属性和方法是公共的，以便在模板中访问它们。

因此，如果我们未在组件中声明属性或方法并尝试在模板中使用它们，则prod模式将引发错误。

此外，这些属性和方法应标记为public。如果不是这样，角度仍然会引发错误。

编辑

这主要是因为常规构建使用JIT（及时）编译，而生产模式使用AOT（提前）编译策略。

JIT模式生成普通的ES5代码，它没有专用字段的概念，因此属性的声明及其可访问性无关紧要。

Answer 3

好的，我发现了问题所在，可耻的是。表达式<button (click)="myVariable='all'" >Test</button>完全有效。

导致问题的原因是单选按钮内的[值]：

<input type="radio" name="gridViewModeRadio" [value]="accounting" (change)="myVariable='accounting'" />

工作：

<input type="radio" name="gridViewModeRadio" [value]="'accounting'" (change)="myVariable='accounting'" />

感谢您的努力！

Angular8-在模板中设置变量

3 个答案: