个人中心
gpt4 book ai didi

angular - Ionic 4 与 Angular 如何设置动态 HTML dir 属性？

转载 作者：行者123 更新时间：2023-12-02 21:22:47 25 4
gpt4 key购买 nike

我想检测用户的翻译文件并根据它来获取所需的方向。例如，HE 将获得 RTL，EN 将获得 LTR。

但是我没有找到实现 <html dir=""> 中的数据的方法标签

这是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>

这是app.component.ts 

import { Component, ViewChild } from '@angular/core';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { TranslateService } from '@ngx-translate/core';
import { Config, Nav, Platform } from 'ionic-angular';
import { Title } from "@angular/platform-browser";

import { FirstRunPage } from '../pages';
import { Settings } from '../providers';

@Component({
  templateUrl: "app.component.html"
})
export class MyApp {

  rootPage = FirstRunPage;

  @ViewChild(Nav) nav: Nav;

  pages: any[] = [
    { title: 'Tutorial', component: 'TutorialPage' },
    { title: 'Welcome', component: 'WelcomePage' },
    { title: 'Tabs', component: 'TabsPage' },
    { title: 'Cards', component: 'CardsPage' },
    { title: 'Content', component: 'ContentPage' },
    { title: 'Login', component: 'LoginPage' },
    { title: 'Signup', component: 'SignupPage' },
    { title: 'Master Detail', component: 'ListMasterPage' },
    { title: 'Menu', component: 'MenuPage' },
    { title: 'Settings', component: 'SettingsPage' },
    { title: 'Search', component: 'SearchPage' }
  ]

  constructor(private titleService:Title, private translate: TranslateService, platform: Platform, settings: Settings, private config: Config, private statusBar: StatusBar, private splashScreen: SplashScreen) {
    this.titleService.setTitle("Some title");
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
    this.initTranslate();
  }

  initTranslate() {
    // Set the default language for translation strings, and the current language.
    this.translate.setDefaultLang('en');
    this.translate.use(this.translate.getBrowserLang() || 'en');

    this.translate.get(['BACK_BUTTON_TEXT']).subscribe(values => {
      this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

正如你所看到的，我在index.html 文件中没有“范围”，只有在路由器 socket 下。如何在index.html页面中进行自定义更改？

最佳答案

你不能也不应该尝试将 html 标签放入 Angular 组件中，最多会造成麻烦。

您必须通过像这样注入(inject)来获取浏览器文档对象的实例，例如在您的应用程序组件中:

https://angular.io/api/common/DOCUMENT

并设置dir属性:

https://developer.mozilla.org/en-US/docs/Web/API/Document 

import { Component, OnInit, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

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

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

  setDir(dir: string) {
    this.doc.dir = dir;
  }

  ngOnInit() {
    this.setDir('rtl')
  }
}

可能最好将其放入单独的服务中，以便您可以清楚地定义如何与文档进行交互

文件服务

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')
  }

}

演示:

https://stackblitz.com/edit/angular-p8riqb

关于angular - Ionic 4 与 Angular 如何设置动态 HTML dir 属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54929956/

25 4 0
文章推荐： c# - 从 C# 中的特定 url 发送带有附件的电子邮件
文章推荐： javascript - JavaScript 中分割整数添加小数点并返回值
文章推荐： netbeans - 使用 JavaFX Scene Builder 2.0 同时显示两个窗口
文章推荐： javascript - 我可以在 deno 中异步多次写入文件吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com