我使用Ionic 4 CLI启动了一个使用Ionic 3.9.2的演示应用程序。我所做的唯一更改是从@ ionic / angular而不是ionic-angular导入NacControler
我的演示收到此错误：“ HomePage.html：7错误TypeError：无法读取未定义的属性'setAttribute'”。
每当单击4个离子按钮之一，调用调用对svg执行动画的函数时，就会出现错误。例如setNight（）。
如果是由于错误的顺序加载而引起的，我不确定如何修复它。
每个请求package.json：
{
"name": "ionic-sunset",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "^7.2.2",
"@angular/core": "^7.2.2",
"@angular/forms": "^7.2.2",
"@angular/http": "^7.2.2",
"@angular/platform-browser": "^7.2.2",
"@angular/platform-browser-dynamic": "^7.2.2",
"@angular/router": "^7.2.2",
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.0.0",
"core-js": "^2.5.4",
"date-fns": "^1.30.1",
"rxjs": "~6.3.3",
"zone.js": "~0.8.29"
},
"devDependencies": {
"@angular-devkit/architect": "~0.12.3",
"@angular-devkit/build-angular": "~0.12.3",
"@angular-devkit/core": "~7.2.3",
"@angular-devkit/schematics": "~7.2.3",
"@angular/cli": "~7.2.3",
"@angular/compiler": "~7.2.2",
"@angular/compiler-cli": "~7.2.2",
"@angular/language-service": "~7.2.2",
"@ionic/angular-toolkit": "~1.4.0",
"@types/node": "~10.12.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.4",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~8.0.0",
"tslint": "~5.12.0",
"typescript": "~3.1.6"
},
"description": "An Ionic project"
}
这是home.page.html
<ion-content>
<div class="controls">
<button color="light" ion-button (click)="setDay()">Day</button>
<button color="light" ion-button (click)="setCloudy()">Cloudy</button>
<button color="light" ion-button (click)="setSunset()">Sunset</button>
<button color="light" ion-button (click)="setNight()">Night</button>
</div>
<svg class="background" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 1334">
<defs>
<style>
.cls-1 {
fill: url(#linear-gradient);
}
.cls-2 {
fill: #fefbdf;
opacity: 0.07;
}
.cls-3 {
fill: #ffda71;
}
.cls-4, .cls-5 {
fill: #fff;
}
.cls-4 {
opacity: 0.95;
}
</style>
<linearGradient id="linear-gradient" x1="375" y1="1334" x2="375" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset="1" stop-color="#50a7dd"/>
</linearGradient>
</defs>
<title>sunsetsvg</title>
<rect id="Sky-2" data-name="Sky" class="cls-1" width="750" height="1334"/>
<g id="Sun" data-name="Sun">
<circle class="cls-2" cx="385" cy="335.7" r="315.74"/>
<circle class="cls-3" cx="385" cy="335.7" r="180.56"/>
</g>
<g id="Clouds">
<path id="Cloud" class="cls-4" d="M303.24,920.47c9.53-6.84,15.35-16,15.35-26,0-18.94-20.8-34.66-48.16-37.83,0-.2,0-0.39,0-0.59,0-28.13-29.43-50.93-65.74-50.93-31.76,0-58.27,17.45-64.4,40.65A156.9,156.9,0,0,0,116.74,844c-58.3,0-105.56,31.51-105.56,70.37s47.26,70.37,105.56,70.37c22.56,0,43.45-4.72,60.61-12.75,10.15,19.11,43.41,33.12,82.91,33.12,47.56,0,86.11-20.31,86.11-45.37C346.37,943,329,928.31,303.24,920.47Z"/>
<path id="Cloud-2" data-name="Cloud" class="cls-5" d="M714.81,520.89c0-19.94-38.95-36.37-89.12-38.62,3.74-4.4,5.79-9.17,5.79-14.16,0-22-39.8-39.81-88.89-39.81-45.55,0-83.1,15.35-88.27,35.13-13.56-5.18-30.92-8.51-50-9.1-10.25-10.15-27-16.77-45.95-16.77-31.19,0-56.48,17.93-56.48,40,0,0.42,0,.84,0,1.26-19.2,9.08-31.53,23.07-31.53,38.79,0,27.36,37.31,49.54,83.33,49.54,20.06,0,38.45-4.21,52.83-11.23a33.31,33.31,0,0,0,35.73,9.44c11.07,22.73,38.54,38.83,70.7,38.83,20,0,38.26-6.26,51.83-16.47,8.79,9.95,23.5,16.47,40.17,16.47,26.92,0,48.74-17,48.74-38a30.14,30.14,0,0,0-1.5-9.38C688.94,551.06,714.81,537.14,714.81,520.89Z"/>
<path id="Cloud-3" data-name="Cloud" class="cls-4" d="M303.24,351c9.53-6.84,15.35-16,15.35-26,0-18.94-20.8-34.66-48.16-37.83,0-.2,0-0.39,0-0.59,0-28.13-29.43-50.93-65.74-50.93-31.76,0-58.27,17.45-64.4,40.65a156.9,156.9,0,0,0-23.56-1.76c-58.3,0-105.56,31.51-105.56,70.37s47.26,70.37,105.56,70.37c22.56,0,43.45-4.72,60.61-12.75,10.15,19.11,43.41,33.12,82.91,33.12,47.56,0,86.11-20.31,86.11-45.37C346.37,373.53,329,358.87,303.24,351Z"/>
<path id="Cloud-4" data-name="Cloud" class="cls-5" d="M657.61,1201.29c9.53-6.84,15.35-16,15.35-26,0-18.94-20.8-34.66-48.16-37.83,0-.2,0-0.39,0-0.59,0-28.13-29.43-50.93-65.74-50.93-31.76,0-58.27,17.45-64.4,40.65a156.9,156.9,0,0,0-23.56-1.76c-44.93,0-83.29,18.71-98.53,45.08-30.67,13.75-50.29,34.78-50.29,58.36,0,41.42,60.52,75,135.19,75,41.79,0,79.14-10.52,103.94-27,14.64,6.08,33.12,9.71,53.21,9.71,47.56,0,86.11-20.31,86.11-45.37C700.74,1223.79,683.38,1209.13,657.61,1201.29Z"/>
</g>
</svg>
<div class="time">{{timeString}}</div>
</ion-content>
这是homepage.ts：
import { Component, Renderer } from '@angular/core';
import { NavController } from '@ionic/angular';
import * as dateFns from 'date-fns';
@Component({
selector: 'page-home',
templateUrl: 'home.page.html'
})
export class HomePage {
timeOfDay: Date = new Date();
timeString: string = '12:00';
sky: any;
entireSun: any;
allClouds: any;
clouds: any;
constructor(public navCtrl: NavController, public renderer: Renderer) {
}
ionViewDidLoad(){
this.timeString = dateFns.format(this.timeOfDay, 'h:mm A');
this.sky = document.querySelector('linearGradient [offset="1"]');
this.entireSun = document.querySelector('#Sun');
this.clouds = document.querySelectorAll('#Clouds path');
this.setTransitions();
}
setTransitions() {
this.renderer.setElementStyle(this.sky, 'transition', '1s linear');
this.renderer.setElementStyle(this.entireSun, 'transition', '1s linear');
this.clouds.forEach((cloud) => {
this.renderer.setElementStyle(cloud, 'transition', '1s linear');
});
}
setNight() {
this.renderer.setElementAttribute(this.sky, 'stop-color', '#141944');
this.renderer.setElementAttribute(this.entireSun, 'transform', 'translate(1, 2000)');
this.renderer.setElementAttribute(this.entireSun, 'opacity', '1');
this.clouds.forEach((cloud) => {
this.renderer.setElementStyle(cloud, 'fill', '#fff');
this.renderer.setElementStyle(cloud, 'opacity', '0.2');
});
}
setDay() {
this.renderer.setElementAttribute(this.sky, 'stop-color', '#50a7dd');
this.renderer.setElementAttribute(this.entireSun, 'opacity', '1');
this.renderer.setElementAttribute(this.entireSun, 'transform', 'translate(1, 1)');
this.clouds.forEach((cloud) => {
this.renderer.setElementStyle(cloud, 'fill', '#fff');
this.renderer.setElementStyle(cloud, 'opacity', '1');
});
}
setSunset(){
this.renderer.setElementAttribute(this.entireSun, 'transform', 'translate(1, 1000)');
this.renderer.setElementAttribute(this.entireSun, 'opacity', '1');
this.renderer.setElementAttribute(this.sky, 'stop-color', '#e2905a');
this.clouds.forEach((cloud) => {
this.renderer.setElementStyle(cloud, 'fill', '#e2c1d8');
this.renderer.setElementStyle(cloud, 'opacity', '0.4');
});
}
setCloudy() {
this.renderer.setElementAttribute(this.sky, 'stop-color', '#cecece');
this.renderer.setElementAttribute(this.entireSun, 'transform', 'translate(1, 1)');
this.renderer.setElementAttribute(this.entireSun, 'opacity', '0.2');
this.clouds.forEach((cloud) => {
this.renderer.setElementStyle(cloud, 'fill', '#fff');
this.renderer.setElementStyle(cloud, 'opacity', '1');
});
}
}