Angular 离子4与角度如何设置动态HTML目录属性？_Angular_Ionic Framework

Angular 离子4与角度如何设置动态HTML目录属性？

angular ionic-framework

Angular 离子4与角度如何设置动态HTML目录属性？,angular,ionic-framework,Angular,Ionic Framework,我想检测用户的翻译文件，并在此基础上获得所需的方向。例如，他将获得RTL，EN将获得LTR 但是，我没有找到一种方法来实现标记中的数据这是index.html文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ionic App</title> <meta name="viewport" content="vi

我想检测用户的翻译文件，并在此基础上获得所需的方向。例如，他将获得RTL，EN将获得LTR

但是，我没有找到一种方法来实现

标记中的数据

这是index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.error('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

如您所见，index.html文件中没有“scope”，只有在路由器出口下。如何在index.html页面中进行自定义更改？

您不能也不应该尝试将html标记放入角度组件中，最多只会造成麻烦

您必须通过如下方式注入浏览器文档对象的实例来获取它，例如，在您的应用程序组件中：

并设置

dir

属性：

可能这最好放在一个单独的服务中，这样您就可以清楚地定义如何与

文档进行交互
文档服务
import { Injectable, Inject } from '@angular/core';
import {DOCUMENT} from '@angular/common';

type ReadingDirection = 'ltr' | 'rtl';

@Injectable({ providedIn: 'root' })
export class DocumentService {

  constructor(@Inject(DOCUMENT) private doc) {}

  public setReadingDirection(dir: ReadingDirection) {
    this.doc.dir = dir;
  }
}

应用程序组件
import { Component,OnInit } from '@angular/core';
import { DocumentService } from './document.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit {
  name = 'Angular';

  constructor(private documentService: DocumentService) {}

  ngOnInit() {
    this.documentService.setReadingDirection('rtl')
  }

}

演示：
非常好的书面回答！请注意，您必须关闭缓存并重新加载已向用户显示的数据，因为即使在图标中使用flip rtl
，已加载的图标仍将保持原样，并且菜单也不会从好的一面打开。我建议在应用新的dir:this.navCtlr.navigateRoot（“”，{animationDirection:'back'）之后，将用户重定向到应用程序的根目录
import { Injectable, Inject } from '@angular/core';
import {DOCUMENT} from '@angular/common';

type ReadingDirection = 'ltr' | 'rtl';

@Injectable({ providedIn: 'root' })
export class DocumentService {

  constructor(@Inject(DOCUMENT) private doc) {}

  public setReadingDirection(dir: ReadingDirection) {
    this.doc.dir = dir;
  }
}

import { Component,OnInit } from '@angular/core';
import { DocumentService } from './document.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit {
  name = 'Angular';

  constructor(private documentService: DocumentService) {}

  ngOnInit() {
    this.documentService.setReadingDirection('rtl')
  }

}