Question

我的Angular应用程序中有一个js文件data.js。这个js文件中有一些变量声明，如下所示。

#import "MyView2.h"
#import "MyView.h"

@interface MyView2() {
    NSRect transparentSubviewRect;
}

@end

@implementation MyView2

- (void)awakeFromNib
{
    NSArray *subviews = [self subviews];
    for (NSView *view in subviews) {
        if ([view isKindOfClass:[MyView class]]) {
            transparentSubviewRect = [view frame];
        }
    }
}

- (void)drawRect:(NSRect)dirtyRect {
    NSRect rect = [self frame];
    NSBezierPath *path = [NSBezierPath bezierPath];
    [path moveToPoint:NSMakePoint(NSMaxX(transparentSubviewRect), NSMaxY(transparentSubviewRect))];
    [path lineToPoint:NSMakePoint(NSMinX(transparentSubviewRect), NSMaxY(transparentSubviewRect))];
    [path lineToPoint:NSMakePoint(NSMinX(transparentSubviewRect), NSMinY(transparentSubviewRect))];
    [path lineToPoint:NSMakePoint(NSMaxX(transparentSubviewRect), NSMinY(transparentSubviewRect))];
    [path lineToPoint:NSMakePoint(NSMaxX(transparentSubviewRect), NSMaxY(transparentSubviewRect))];
    [path closePath];
    [path moveToPoint:NSMakePoint(NSMaxX(rect), NSMaxY(rect))];
    [path curveToPoint: NSMakePoint(NSMaxX(rect), NSMinY(rect))
               controlPoint1: NSMakePoint(NSMaxX(transparentSubviewRect), NSMaxY(transparentSubviewRect))
               controlPoint2: NSMakePoint(NSMaxX(rect), NSMinY(transparentSubviewRect))];
    [path lineToPoint:NSMakePoint(NSMinX(rect), NSMinY(rect))];
    [path lineToPoint:NSMakePoint(NSMinX(rect), NSMaxY(rect))];
    [path lineToPoint:NSMakePoint(NSMaxX(rect), NSMaxY(rect))];
    [path lineToPoint:NSMakePoint(NSMaxX(rect), NSMaxY(rect))];
    [path closePath];
    [[NSColor windowBackgroundColor] setFill];
    [path fill];
}

@end

#import "MyWindow.h"

@implementation MyWindow


- (BOOL)isOpaque
{
    return NO;
}

- (NSColor *)backgroundColor
{
    return [NSColor colorWithCalibratedWhite:0.0 alpha:0.3];
}

@end

现在我必须在我的组件（app.component.ts）中访问这些变量及其值。

我读了一些宣称它们的地方，因为出口使它们成为模块，那些可以在任何地方访问，但我不知道如何做到这一点。

这是我的应用程序的结构。我在assets-＆gt; js文件夹中有data.js.我需要修改app.component.ts中的变量值。

我对Angular很新。这甚至可能吗？

Answer 1

随着资产中的文件，我猜你在窗口上声明它。您需要在index.html中包含脚本，然后通过window.data在组件的窗口中访问它。除非您的用例规定，否则这不是推荐的方法。您提到的模块方法是首选。

在app.component.ts旁边，创建一个名为data.ts的文件，其中包含：

export let data: string = 'data';

在app.component.ts中，使用以下方法导入：

import { data } from './data.ts';

如果您打算不改变该数据，请考虑使用const关键字（在data.ts中）。

目录结构

/app.component.ts
/data.ts
/...

编辑：显示全球方法

您需要在Angular应用程序的上下文之外包含脚本。如果使用Angular CLI引导应用程序，则可以在cli配置文件中添加对它的引用。请参阅topic上的此文档。

该文件将被包含在内，并且可以在窗口中的组件中访问。棘手的部分来自typing and the Window。示例可能看起来像这样。

class AppComponent extends Component {

     private data: string;
     constructor() {
       // Explicitly cast window as an any type.  Would be better to type this, but this should work for you.
       this.data = (<any>window).data;
     }       

}

Answer 2

（参考https://stackoverflow.com/a/42682160）

首先，您必须将脚本包含在src/index.html中，例如

<脚本src =“ / assets / js / data.js”>

重要的是，以上语句位于角根组件标签之前（< root-component>< /root-component>或< ion-app>< /ion-app>等）

然后，您只需编写即可（例如在app.component.ts ngOnInit函数内部）

let varFromJsFile = window["data"] // varFromJsFile = 'test'

Answer 3

您希望变量是Component类的成员，而不仅仅是在模块中任何位置声明的变量。

如果这没有意义，你需要更仔细地查看一些基本的Angular代码示例。

此外，只要您使用Angular并因此使用TypeScript，使用let或const声明变量就会更好。

在Angular 5中访问组件中的javascript变量

3 个答案: