Вызвать машинописный текст из javascript и наоборот

Вот проблема ... У меня сначала были библиотеки, в которых есть файлы d.ts, поэтому я смог использовать их в проекте angular2, но у меня нет d.ts для некоторые другие, а также библиотеки из репозитория opensource не являются полными или не обновлены для более новой версии библиотек .js, которые я хочу использовать.Вызвать машинописный текст из javascript и наоборот

Так что я хочу попробовать ту же операцию, но в противоположном направлении, например, у меня есть некоторые ограничения из-за углового2 ... Я могу включить непосредственно javascript на страницу html, и среда углов2 будет запущена, как всегда.

Позвольте мне опубликовать код, чтобы вы undestand лучше:

<html> 
<head> 
<title>Angular 2 QuickStart</title> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="styles.css"> 
<!-- Polyfill(s) for older browsers --> 
<script src="node_modules/core-js/client/shim.min.js"></script> 
<script src="node_modules/zone.js/dist/zone.js"></script> 
<script src="node_modules/reflect-metadata/Reflect.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js" charset="utf-8"></script> 
<script src="systemjs.config.js"></script> 
<script> 
System.import('app').catch(function(err){ console.error(err); }); 
</script> 
</head> 
<body> 
<my-app>Loading...</my-app> 
<!-- Here my custom javascript that will create some controls under body--> 
<script> 
<!-- this script will create some custom controls--> 
</script> 
</body> 
</html>

Итак, как вы видите угловую будет настроен и загружен как alwasys, но мой обычая Javascript также будет выполнен.

Я хочу общаться с этого JavaScript, который находится в нижней части на странице с в angular2 компоненты/модули

Любые идеи ?????????

Отвратительный странный, я представляю, это создать скрытый div, где я храню свой json и использовать его для общения с компонентами/модулями ... он грязный, но у вас могут быть лучшие идеи !!!!!!

источник

2016-09-05 Jherzon Franz Nava Rojas

содержит ли Javascript только классы или функции, которые вы хотите получить от своих компонентов? Или это запущенный скрипт, который активно «делает» материал? – BeetleJuice

Я не понимаю, какая у вас проблема. Пожалуйста, подумайте о том, чтобы перефразировать ваш вопрос, чтобы сделать его более ясным. – Alex

@BeetleJuice well - это полная библиотека, библиотека карт google. (скажем, какой-то орган) ", но почему вы не используете Angular2-google-maps" по той простой причине, что он не является полным и у него есть ошибки, и он не сертифицирован Google. но по вашему вопросу я думаю, что u предложит сделать сам файл определения, чтобы я мог использовать его в машинописном тексте ??? но для этих огромных библиотек это займет слишком много времени ... :(.... –

К сожалению я didnt't обновить код так вот решение: Вы регистрирует обратные вызовы на глобальном масштабе общаются на angular2, обновление от машинописи компоненты к JavaScript легко мы просто называют эту функцию обратного вызова, который зарегистрироваться в глобальном масштабе, но вызывая функцию обратного вызова из JavaScript, чтобы обновить компонент angular2 немного сложнее, но я оставлю вас здесь Конде компонента:

export class MyComponent { 
    selectedData: any; 

    constructor(private _ngZone: NgZone, 
     private elementRef: ElementRef) { 
     this.title = this.companyName; 
    } 

    public updateDataAction = (data: any) => { 
     this._ngZone.runOutsideAngular(() => { 
      this._ngZone.run(() => { 
       this.selectedData = data[0].value[3]; 
      }); 
     }) 
    }; 

    ngAfterViewInit() { 
     sendMessage(this.updateDataAction); 
    } 
}

Возьмите в счете, что SendMessage является глобальный метод, я имею в виду зарегистрированный в глобальном масштабе, и, конечно, вам нужно добавить определение n в файле d.ts вот так:

объявить функцию sendMessage (callback: ((message: string) => void)): void;

КРАСИВЫЙ НЕ ЭТО ??? a art

источник

2016-09-28 19:19:54

Используйте веб-компонент Google Maps. https://github.com/GoogleWebComponents/google-map Angular2 был создан с учетом веб-компонентов. Сила веб-компонентов заключается в том, что они предоставляют интерфейс, доступ к которому можно получить из любой среды, набора инструментов или простого старого javascript.

Ниже приведен пример использования веб-компонента отображения в Angular2: https://technology.amis.nl/2016/02/10/how-to-use-polymer-webcomponents-in-angular2/

Update

Или, если вам действительно нужны Google Maps JavaScript API просто создать провайдера, который возвращает в window.google.maps.Map объект так что вы можете вызвать его прямо в своих компонентах или услугах.

Другим вариантом является просто использовать этот пакет: https://www.npmjs.com/package/google-maps

источник

2016-09-06 12:48:55 Martin

Ник попробуйте сначала, эти примеры не с Angular2 rc6, библиотека Google-Map не может быть загружена с использованием Bower даже заставляя ti, даже бумажную кнопку. :( –

Jherzon, я объясню, как я интегрировал 3-й партии библиотеки графиков. Надеюсь, это поможет вам; просто заменить ссылки с вашей библиотекой и ее основным классом объекта:

Добавить библиотеку в dependencies в packages.json. Я добавил "chart.js": "2.2.1"
Run npm install установить библиотеку как модуль НПМ
Добавить библиотеку SystemJS пакетов. Вот выдержка из моего systemjs.config.js:

// map tells the System loader where to look for things 
var map = { 
    'app':      'dist', 
    'rxjs':      'node_modules/rxjs', 
    '@angular':     'node_modules/@angular', 
    'chart.js':     'node_modules/chart.js/dist', 
}; 
// In packages, add a reference to the JS file with the 3rd party lib 
var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'chart.js':     {main:'Chart.js', defaultExtension: 'js'}, 
};

Поскольку нет файлов определения машинописи с библиотекой, компилятор будет бросать ошибки повсюду. Поэтому я добавил файл с именем custom.typings.d.ts.Он содержит приведенную ниже строку (замените Chart на то, что основной класс объекта находится в вашей сторонней библиотеке):

declare var Chart:any;

И я добавил ссылку на этот файл, так машинопись будет видеть декларацию и не жалуйтесь, когда я получить доступ к методам и свойствам класса объектов. В main.ts У меня есть:

///<reference path="./path/to/custom.typings.d.ts"/>

После того, как все, что установка: В любой компонент, который использует диаграммы, импортировать библиотеку как я и любой другой класс зависимостей с:

import 'chart.js'; //replace with the SystemJS's map property name used above

Ваши пути могут отличаться, но это в основном моя установка. Теперь используйте библиотеку по своему усмотрению. Для меня это было:

let oChart = new Chart(this.chartOptions);

источник

2016-09-07 12:51:45 BeetleJuice

Вызвать машинописный текст из javascript и наоборот

ответ

Смежные вопросы