我想从 ionic html 页面导航到网页 url。 我试过以下：
这个例子
{{test.refWebsite}}
这个例子：
<ion-router-link href="{{test.refWebsite}}">{{test.refWebsite}}</ion-router-link>
最后这个：
<a [routerLink]="{{test.refWebsite}}">{{test.refWebsite}}</a>
Ever 示例导航到我在 app.routng.module 中定义的“未找到页面”路由：
{
path: '**',
redirectTo: 'page-not-found'
},
所以我的问题是如何从我的离子应用程序 html 页面导航到外部网站？
更新： 按照Capacitor documentation我已经实施如下：
import { Plugins } from '@capacitor/core';
const { Browser } = Plugins;
async openBrowser(webpage){
console.log("home.page.ts: Opneing Web browser: " + webpage);
await Browser.open({url: webpage});
}
//HTML 实现
<p (click)="openBrowser(test.refWebsite)">Referral Center: <a> {{test.refWebsite}}</a></p>
控制台输出显示一个有效的 URL 被传递给函数：
home.page.ts：Opneing Web 浏览器： www.sheffieldchildrens.nhs.uk/sdgs/oncology-genetics
尽管 URL（网页）有效，但我仍然打开“找不到页面”，任何输入都值得赞赏，因为我不明白为什么会这样。
添加完整的类文件：
home.page.ts
mport { Component, ɵChangeDetectorStatus } from '@angular/core';
import { AlertController, ModalController } from '@ionic/angular';
import { Student, Test, StudentService } from '../services/student.service';
import { StudentModalPage } from '../student-modal/student-modal.page';
import {FormControl, ReactiveFormsModule } from '@angular/forms';
import { debounceTime} from "rxjs/operators";
import { serializeNodes } from '@angular/compiler/src/i18n/digest';
import { IonSlides, MenuController } from '@ionic/angular';
import { Storage} from '@ionic/storage';
import { CallNumber } from '@ionic-native/call-number/ngx';
import { Plugins } from '@capacitor/core';
import { stringify } from '@angular/compiler/src/util';
const { Browser } = Plugins;
// import { Plugins } from '@capacitor/core';
// const { Storage } = Plugins;
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
//Firelds
public students : Student[];
public tests : Test[];
public searchTerm : string;
public searchControl : FormControl;
public searching : any = false;
public adminUser : any = false;
public cacheData : Test[];
public referralPhoneNumber : string;
constructor(
private service : StudentService,
private alertCtrl : AlertController,
private modalCtrl : ModalController,
private menu : MenuController,
private storage : Storage,
private callNumber : CallNumber
) {
this.searchControl = new FormControl();
}
ionViewDidEnter(){
this.menu.enable(true);
//See if admin user
//this.adminUser = Storage.get({key: 'adminUser'});
this.storage.get('adminUser').then((val) =>{
console.log("home.pg: value of admin user = ", val);
this.adminUser = val;
console.log("home.page: Is user admin user: " + this.adminUser);
});
//this.storage.set('adminUser', true);
}
ngOnInit() {
/**
* Get data from the SQL DB and store in local array Test
* This calls student.serce which in turn calls the GET API
* Set up serach Form, debounce tme is time to wait
* before before triggerng serah / observable
*/
this.searching = true;
console.log("Home.page: ngOnOt- Gettnig all data...");
this.service.getAll().subscribe(response => {
console.log("Home.ts: getAll call = " + response);
//this.students = response;
this.tests = response;
this.searching = false; //Turn spinner off
//Cache data
// Storage.set
});
// this.setFilteredTests("");
this.searchControl.valueChanges
.pipe(debounceTime(700))
.subscribe(search=> {
this.searching = false;
this.setFilteredTests(search);
});
}
setFilteredTests(searchTerm : string){
/**
* USer teh seah term form user input to filter
* the test array
* https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/
* Assign a lcoal var tp current tests array which we will use
* to reasign tests if searh is null or empty.
* This saves us making another tme wasting PAI get call
*/
console.log("Home.page.ts: 44 Ste filter serach bar called, serach = " + searchTerm);
if (searchTerm != ""){
this.tests = this.tests.filter(test => {
if (test.investigation.toLowerCase().indexOf(searchTerm.toLowerCase()) == -1){
console.log("Home.page.ts 73= Serach not found for " + searchTerm + " so searching alais");
return test.Alias.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
}
console.log("home.oage: 78: Found " + searchTerm + " in test.investigation.");
return test.investigation.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
})
}else{
console.log("Home.page.ts: Seathetrm is blank - " + searchTerm + "; so getting dtta with GET API");
this.service.getAll().subscribe(data => {
this.tests = data;
})
}
}
onSearchInput(){
/**
* Turn on spinner when seraching
* Set to false when loaing page and when serach observable triggers in onIt
*/
this.searching = true;
}
async openBrowser(webpage){
console.log("home.page.ts: Opneing Web browser: " + webpage);
await Browser.open({url: webpage});
}
removeTest(id : number){
console.log("Home.page.ts: Remove test id : " + id);
if (this.adminUser){
this.alertCtrl
.create({
header: 'Delete',
message: 'are you sure you want to delete this test?',
buttons : [
{
text: 'Yes',
handler: () => {
this.service.remove(id).subscribe(() => {
// Filter the tst array to all test.id's excpet one removed
this.tests = this.tests.filter(std => std.id !== id);
});
}
},
{ text: 'No'}
]
})
.then(alertE1 => alertE1.present());
}//if this admin user
else{
this.alertCtrl.create({
header: 'Delete',
message: 'You must be an administrator to make these changes',
buttons : [
{
text: 'OK'
}
]
})
.then(alertE1 => alertE1.present());
}
}
callPhoneNumber(phoneNumber) : void{
//Usre clicked call number, https://ionicframework.com/docs/native/call-number
let correctNumber = phoneNumber.replace(/\s/g,"");//remove whitespace
console.log("home.page: call Nimber() " + correctNumber);
this.callNumber.callNumber(phoneNumber, true)
.then(res => console.log("Launched Dialer", res))
.catch(err => console.log("Error launching handler", err));
// this.callNumber.callNumber("18001010101", true)
// .then(res => console.log('Launched dialer!', res))
// .catch(err => console.log('Error launching dialer', err));
}
addStudent(){
/**
* Call studentmodal page
* Also when Add Student page is closed
* we will capture what teh page sends back when navCtlr.dismiss(params)
* is called, so we can upadte any new test additions to this page
* The modal presnet teh Add Student page, .then() return inof sent back
* from this page.
*/
console.log("Home.ts: Add test");
if (this.adminUser){
this.modalCtrl.create({
component: StudentModalPage
})
.then(modal => {
modal.present();
return modal.onDidDismiss();
})
.then(({ data, role}) => {
if ( role === 'created'){
//add new test from Add Test page to test arrauy
console.log("Home.page: 148- New test created : " + data + "- Adding to Tests Array view.")
//this.students.push(data);
this.tests.push(data);
}
});
}//if this admin user
else{
this.alertCtrl.create({
header: 'Add',
message: 'You must be an administrator to make these changes',
buttons : [
{
text: 'OK'
}
]
})
.then(alertE1 => alertE1.present());
}
}
updateStudent(test){
/* We need to pas the student object ot the
* StidentModalPage with modalCtrl
* And we also handle the retuned data from Student Modal Page
*/
console.log("Home.page.ts: upadte, passing to StudentModalPage student - " + test.investigation + " : id - " + test.id);
if (this.adminUser){
this.modalCtrl.create({
component : StudentModalPage,
//componentProps : {student : student}
componentProps : {test : test}
})
.then(modal => {
modal.present();
//get returned moddel form Stdent Model page
console.log("home.page.ts: 92: Getting return data form Stduent Modal page Uodate / PUT");
return modal.onDidDismiss();
})
.then(({ data, role}) => {
//this.students = this.students.filter(std => {
this.tests = this.tests.filter(std=> {
console.log("Home.page.ts: 97: Retrining to home frm Student modal update / PUT with data studnet IFD to update list: " + data.id);
if (data.id === std.id){
//return uodated tests array
return data;
}
return std;
});
});
}
//if this admin user
else{
this.alertCtrl.create({
header: 'Delete',
message: 'You must be an administrator to make these changes',
buttons : [
{
text: 'OK'
}
]
})
.then(alertE1 => alertE1.present());
}
}//upadtes test
}
HTML
<ion-header [translucent]="true">
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-back-button defaultHref="app/categories">Menu</ion-back-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button color="primary" (click)="addStudent()">
Add New
</ion-button>
</ion-buttons>
<ion-title>
All tests
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content ion-padding color="primary">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">User Manual Tests</ion-title>
</ion-toolbar>
</ion-header>
<!--Serachbar-->
<ion-searchbar [formControl]="searchControl" (ionChange)="onSearchInput()">
</ion-searchbar>
<!--Spinner for serach box-->
<div *ngIf="searching" class="spinner-container">
<ion-spinner></ion-spinner>
</div>
<!--<ion-list *ngFor="let student of students">-->
<ion-list *ngFor="let test of tests" color="primary">
<ion-item-sliding>
<ion-item >
<ion-avatar slot="start">
<div class="avatar">
<!--{{student.name.substring(0,1).toUpperCase()}}-->
{{test.investigation.substring(0,1).toUpperCase()}}
</div>
</ion-avatar>
<ion-label>
<!--
<h3 class="title">{{student.name}}</h3>
<p class="subtext">
{{'From ' + student.address + ' Tel: ' + student.phone}}
</p>
-->
<h3 class="title">{{test.investigation}}</h3>
<p class="subtext">Speciman Type:
{{test.SpecimanType}}
<br> {{test.Comments}}
<br>Container:
{{test.container}}
<br>Phone:
{{test.phone}}
<br>TAT: {{test.TAT}}
<br>Phoning Criteria: {{test.phoneCriteria}}
<br>Referred Tests (Y/N): {{test.referred}}
</p>
<div class = "subtext" *ngIf="test.referred == 'Y'">
<a (click)="openBrowser(test.refWebsite)">{{test.refWebsite}}</a>
<a href="{{test.refWebsite}}">OPEN {{test.refWebsite}}</a>
<p (click) = "callPhoneNumber(test.refNumber)">
Refferal Number: <a>{{test.refNumber}}</a></p>
</div>
</ion-label>
</ion-item>
<ion-item-options slide="end">
<ion-item-option color="danger" (click) = "removeTest(test.id)">
<ion-icon name="trash"></ion-icon>
</ion-item-option>
<ion-item-option color="success" (click)="updateStudent(test)">
Edit
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<!-- <div id="container">
<strong>Ready to create an app?</strong>
<p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
</div> -->
</ion-content>
网址需要“https://”前缀才能工作。
打开{{test.refWebsite}}
一个不太合格的人提问和回答问题。
“谢谢”你。
╭∩╮（︶_︶）╭∩╮