彼此叠加组件样式(css)

时间:2019-02-15 00:10:40

标签: angular-material single-page-application encapsulation angular-router

在我们的SPA中,有一个CSS样式行为的奇怪功能, 问题是样式分层,当您转到/ rout(链接)时会发生这种情况,当您在浏览器中重新加载此类页面时,会保存上一组件中的样式并将其添加到新的中(ctrl + r)一切都准备就绪,组件开始只有自己的CSS样式。

  

我们的操作顺序:

  1. 打开组件[A]
  2. 过渡到组分[B]
  3. 组件[A]的样式添加到组件[B]
  4. 我们从[С]中的成分[B]中传递了
  5. 组件[С]的样式来自整个过渡链 [А] + [B] + [С],尽管它应该只有[С]

broken behavior style

  

我们使用:

"dependencies": {
    "@amcharts/amcharts4": "^4.1.3",
    "@angular/animations": "^7.2.4",
    "@angular/cdk": "^7.3.1",
    "@angular/common": "^7.2.4",
    "@angular/compiler": "^7.2.4",
    "@angular/core": "^7.2.4",
    "@angular/forms": "^7.2.4",
    "@angular/http": "^7.2.4",
    "@angular/material": "^7.3.1",
    "@angular/platform-browser": "^7.2.4",
    "@angular/platform-browser-dynamic": "^7.2.4",
    "@angular/router": "^7.2.4",
    "@compodoc/compodoc": "^1.1.7",
    "@molteni/export-csv": "0.0.2",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "copyfiles": "^2.1.0",
    "core-js": "^2.6.2",
    "decimal.js-light": "^2.5.0",
    "google-protobuf": "^3.6.1",
    "grpc-web": "^1.0.3",
    "hammerjs": "^2.0.8",
    "husky": "^1.2.0",
    "jquery": "^3.3.1",
    "ngx-i18n-combine": "^1.1.0",
    "ngx-translate-parser-plural-select": "^1.1.3",
    "node-sass": "^4.11.0",
    "normalize.css": "^8.0.1",
    "protobufjs": "^6.8.8",
    "qrious": "^4.0.2",
    "rxjs": "^6.3.3",
    "zone.js": "^0.8.26"
},
"devDependencies": {
    "@angular-builders/jest": "^7.2.0",
    "@angular-devkit/build-angular": "~0.12.1",
    "@angular/cli": "~7.2.1",
    "@angular/compiler-cli": "^7.2.0",
    "@angular/language-service": "^7.2.0",
    "@commitlint/cli": "^7.3.2",
    "@commitlint/config-angular": "^7.3.1",
    "@types/google-protobuf": "^3.2.7",
    "@types/jquery": "^3.3.29",
    "@types/node": "~10.12.12",
    "codelyzer": "~4.5.0",
    "commitizen": "^2.7.6",
    "cz-customizable": "^5.3.0",
    "date-format": "^2.0.0",
    "fs-extra": "^7.0.1",
    "git-describe": "^4.0.3",
    "hash-files": "^1.1.1",
    "htmllint": "^0.7.3",
    "htmllint-cli": "0.0.7",
    "http-server": "^0.11.1",
    "jest": "^23.6.0",
    "js-beautify": "^1.8.9",
    "minimist": "^1.2.0",
    "protractor": "^5.4.2",
    "replace": "^1.0.1",
    "stylelint": "^9.9.0",
    "stylelint-config-standard": "^18.2.0",
    "tar": "^4.4.8",
    "ts-node": "^7.0.1",
    "tslint": "^5.12.0",
    "typescript": "3.1.6",
    "typescript-formatter": "^7.2.2",
    "webpack-bundle-analyzer": "^3.0.3"
}

0 个答案:

没有答案