到目前为止的故事。
我正在尝试在Angular 4应用程序中使用下面的基本原语库。
https://www.basicprimitives.com/index.php?option=com_content&view=article&id=68&Itemid=111&lang=en
我将通常可疑的JS文件添加到我的angular-cli-json中。
我的package.json如下所示。
"dependencies": {
"@angular/animations": "^4.2.4",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"@types/jquery": "^3.2.15",
"@types/underscore": "^1.8.4",
"core-js": "^2.4.1",
"jquery": "^3.2.1",
"rxjs": "^5.4.2",
"underscore": "^1.8.3",
"zone.js": "^0.8.14" },
"devDependencies": {
"@angular/cli": "1.4.9",
"@angular/compiler-cli": "^4.2.4",
"@angular/language-service": "^4.2.4",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.3.3"
我的组件如下所示：
import { Component } from '@angular/core';
import * as _ from 'underscore';
import * as Primitives from 'demo/js/primitives.min.js';
import * as $ from 'jquery';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor() { function famdiagram() {
var options = new Primitives.famdiagram.Config();
var items = [
{ id: 1, spouses: [2], title: "Thomas Williams", label: "Thomas Williams", description: "1, 1st husband", image: "demo/images/photos/t.png" },
{ id: 2, title: "Mary Spencer", label: "Mary Spencer", description: "2, The Mary",image: "demo/images/photos/m.png" },
{ id: 3, spouses: [2], title: "David Kirby", label: "David Kirby", description: "3, 2nd Husband", image: "demo/images/photos/d.png" },
{ id: 4, parents: [1, 2], title: "Brad Williams", label: "Brad Williams", description: "4, 1st son", image: "demo/images/photos/b.png" },
{ id: 5, parents: [2, 3], title: "Mike Kirby", label: "Mike Kirby", description: "5, 2nd son, having 2 spouses", image: "demo/images/photos/m.png"}
];
options.items = items;
options.cursorItem = 2;
options.linesWidth = 1;
options.linesColor = "black";
options.hasSelectorCheckbox = Primitives.common.Enabled.False;
options.normalLevelShift = 20;
options.dotLevelShift = 20;
options.lineLevelShift = 20;
options.normalItemsInterval = 10;
options.dotItemsInterval = 10;
options.lineItemsInterval = 10;
$("#basicdiagram").famDiagram(options);
}//]]> }
}
我收到以下错误：
"file: 'file:///c%3A/Users/Can/newtest/learning/src/app/app.component.ts'
severity: 'Error'
message: 'Property 'famDiagram' does not exist on type 'JQuery<HTMLElement>'.'
at: '36,37'
source: 'ts'"
任何人都可以告诉我为什么不“$（”＃basicdiagram“）。famDiagram（options）”访问像Primitives.famdiagram.config这样的工作？他们不是在访问同一个东西吗？
巨大的编辑感谢大家的建议。我对整件事进行了返工。现在我得到零错误，我的jquery功能工作，但我没有得到任何结果。
ngAfterViewInit()
{
$( 'button' ).click(function() {
alert( "Handler for .click() called." );
});
$('window').load('load',function () {
console.log('inside of window');
var options = new Primitives.famdiagram.Config();
var items = [
{ id: 1, spouses: [2], title: "Thomas Williams", label: "Thomas Williams", description: "1, 1st husband", image: "demo/images/photos/t.png" },
{ id: 2, title: "Mary Spencer", label: "Mary Spencer", description: "2, The Mary",image: "demo/images/photos/m.png" },
{ id: 3, spouses: [2], title: "David Kirby", label: "David Kirby", description: "3, 2nd Husband", image: "demo/images/photos/d.png" },
{ id: 4, parents: [1, 2], title: "Brad Williams", label: "Brad Williams", description: "4, 1st son", image: "demo/images/photos/b.png" },
{ id: 5, parents: [2, 3], title: "Mike Kirby", label: "Mike Kirby", description: "5, 2nd son, having 2 spouses", image: "demo/images/photos/m.png"}
];
options.items = items;
options.cursorItem = 2;
options.linesWidth = 1;
options.linesColor = "black";
options.hasSelectorCheckbox = Primitives.common.Enabled.False;
options.normalLevelShift = 20;
options.dotLevelShift = 20;
options.lineLevelShift = 20;
options.normalItemsInterval = 10;
options.dotItemsInterval = 10;
options.lineItemsInterval = 10;
var features= options;
$('basicdiagram').famDiagram(features);
});
console.log('This is after window load ');
}
}
按钮单击是为了确保一切正常。任何人都可以建议为什么我没有得到任何结果？