我使用了以下代码。这在index.html
中有效<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Google Transliterate API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
if (google.elements.transliteration.isBrowserCompatible()) {
var options = {
sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage: [google.elements.transliteration.LanguageCode.SINHALESE],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textbox with id
// 'transliterateTextarea'.
control.makeTransliteratable(['transliterateTextarea']);
} else {
document.getElementById('errorDiv').innerHTML = 'Sorry! Your browser does not support transliteration';
}
}
google.setOnLoadCallback(onLoad);
</script>
更改此代码后的。
Ts组件
import { Component, OnInit } from '@angular/core';
declare var google:any;
@Component({
选择器:“ app-root”,
templateUrl:'./ app.component.html',
styleUrls:['./ app.component.css']
})
export class AppComponent implements OnInit {
title = 'translate';
public sinhalaText: string;
constructor() {
google.load('elements','1', { packages: 'transliteration'});
google.setOnLoadCallback(this.onLoad);
}
ngOnInit() {}
onLoad() {
const sinhalOptions = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.SINHALESE],
shortcutKey: 'ctrl+s',
transliterationEnabled: true
};
const tamilOptions = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.TAMIL],
shortcutKey: 'ctrl+t',
transliterationEnabled: true
};
const sinhalaControl = new google.elements.transliteration.TransliterationControl(sinhalOptions);
const elements = document.getElementsByClassName('sinhalaText');> sinhalaControl.makeTransliteratable(elements);
// const sinhalaControl = new google.elements.transliteration.TransliterationControl(sinhalOptions);
// sinhalaControl.makeTransliteratable(this.sinhalaText);
}
}
html组件
<textarea [(ngModel)]="sinhalaText" id="sinhalaText" style="width:600px;height:200px"></textarea>
index.html
<body>
<app-root></app-root>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</body>
这不起作用。
该代码适用于angular的index.html文件。但我要求将代码嵌入角度应用程序的组件内部。怎么办?
答案 0 :(得分:1)
请使用良好的livecyle函数:transform(items: any[], terms: string): any[] {
if(!items) return [];
if(!terms) return items;
terms = terms.toLowerCase();
return items.filter( it => {
//if it is something like "Programmer 07 November 12:00PM"
var informations = it.split(' '); //["Programmer", "07" ,"November" ,"12:00PM"]
var termArray = terms.split(' ');
var rightResult = true;
for (var index in termArray) {
if !(informations.include(termArray[index])) {
rightResult = false;
}
return rightResult;
});
}
,等待HTML包含在DOM中。
在TS
AfterViewInit
在HTML
@ViewChild('sinhalaTextInput') sinhalaTextInput: ElementRef;
ngAfterViewInit() {
...
google.setOnLoadCallback(() => this.onLoad()); // Don't lose "this" context
}
private onLoad() {
...
const elements = this.sinhalaTextInput.nativeElement;
...
}
答案 1 :(得分:0)
我只是发布完整的组件作为答案
export class HomeComponent implements OnInit {
model = {
left: true,
middle: false,
right: false
};
sinhalaText:"string"
focus;
focus1;
constructor() { }
ngOnInit() {}
@ViewChild('sinhalaTextInput') sinhalaTextInput: ElementRef;
ngAfterViewInit() {
google.load("elements", "1", {
packages: "transliteration"
});
google.setOnLoadCallback(() => this.onLoad()); // Don't lose "this" context
}
private onLoad() {
const elements = this.sinhalaTextInput.nativeElement;
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.TAMIL],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textbox with id
// 'transliterateTextarea'.
control.makeTransliteratable([elements]);
}
}
答案 2 :(得分:0)
以下代码对我有用。
我做了两次更改
google.load("elements", "1", {
packages: "transliteration"
});
sinhalaControl.makeTransliteratable([elements.id]);
import { Component, ElementRef, ViewChild, OnInit, AfterViewInit } from '@angular/core';
declare var google: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
title = 'ng-transliteration';
sinhalaText: string = '';
constructor() {
}
@ViewChild('sinhalaTextInput', {static: false}) sinhalaTextInput: ElementRef;
ngOnInit() {
}
ngAfterViewInit() {
google.setOnLoadCallback(() => this.onLoad());
}
onLoad() {
const sinhalOptions = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.SINHALESE],
shortcutKey: 'ctrl+s',
transliterationEnabled: true
};
const tamilOptions = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.TAMIL],
shortcutKey: 'ctrl+t',
transliterationEnabled: true
};
const sinhalaControl = new google.elements.transliteration.TransliterationControl(sinhalOptions);
const elements = this.sinhalaTextInput.nativeElement;
sinhalaControl.makeTransliteratable([elements.id]);
// const sinhalaControl = new google.elements.transliteration.TransliterationControl(sinhalOptions);
// sinhalaControl.makeTransliteratable(this.sinhalaText);
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgTransliteration</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("elements", "1", {
packages: "transliteration"
});
</script>
</head>
<body>
<app-root></app-root>
</body>
</html>
<!---- app.component.html ---->
<textarea [(ngModel)]="sinhalaText" #sinhalaTextInput id="sinhalaText" style="width:600px;height:200px"></textarea>