标签: angular5

我创建了一个简单的组件，它包装了 bootstrap 的 typeahead 控制器，因此它按照我想要的应用程序配置方式进行配置。该组件有一个公共变量，selectedWorker即ngModel来自预输入的变量。

所以现在，当我在其他地方使用这个组件时，我想做这样的事情：

<app-worker-lookup [(ngModel)]="foo"></app-worker-lookup>

然后将foo调用者的变量绑定到具有所选值的查找组件的公共变量。我不知道如何实施。

我有一个角度应用程序仅支持一种语言环境（法语）。然后，我改进了应用程序以支持另一种语言，其中相同的组件在另一个根路径下可用/ar

我现在的问题是应用程序使用了很多 [routerLink]="['some', 'thing'] 和其他 router.navigate('...')。而不是 i18n 所有链接，我正在考虑一个执行 url 转换的智能方法。

我做了以下事情：

this.translateService.onLangChange
.combineLatest(this.router.events)
.subscribe(([langEvent, event]) => {

    if (event instanceof NavigationStart) {
        let currentUrl = event.url;

        let locale = Locale.getLocaleByShortcut(langEvent.lang);

        if (locale) {
            if (locale.isArabic()) {
                if (!ContextUtils.isArabicUrl(currentUrl)) {
                    this.router.navigate(['/ar/' + currentUrl], {queryParams: this.route.snapshot.queryParams});
                }
            } else {
                if (ContextUtils.isArabicUrl(currentUrl)) {
                    let url = ContextUtils.frenchifyUrl(currentUrl);
                    this.router.navigate([url], {queryParams: this.route.snapshot.queryParams});
                }
            }
        }

    }

    if (event instanceof NavigationEnd) {

        if (Config.IS_WEB()) {
            $(document).ready(() =>
                setTimeout(() => {
                    Materialize.updateTextFields()
                }, 10)
            ); …

我无法使用 renderer2 禁用角度材质的选择下拉菜单。下面是我的代码

组件.html

            <mat-select #exLoc (selectionChange)="someFun($event)" [(value)]="someVal">
              <mat-option aria-selected="true" [value]="locVal" *ngFor="let location of locations">{{location.LocationName}}
              </mat-option>
            </mat-select>

组件.ts

constructor(public renderer: Renderer2) {} 
@ViewChild('exLoc') exLoc: ElementRef;
functionToDisableDropDown() {
 this.renderer.setAttribute(this.exLoc, 'disabled', 'true');
}

我在 Angular 5 前端框架中使用javascript Google Maps组件

export class MapComponent implements OnInit {
  ngOnInit() {
    this.initializeGMap()
  }

  initializeGMap() {
    var myLatlng = new google.maps.LatLng(12,77);

    var mapOptions = {
        zoom: DEFAULT_MAP_ZOOM,
        center: myLatlng,
        scrollwheel: true,
        styles: MAP_STYLE
    };
    this.map = new google.maps.Map(document.getElementById("map"), mapOptions);
    this.initOnMapClickListener();
  }

  initOnMapClickListener() {
      google.maps.event.addListener(this.map, 'click', function(event) {

      var selectedLocation = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
      this.addMarker(selectedLocation)
    });
  }

addMarker(latlng) {
    var marker = new google.maps.Marker({
      position: latlng,
      map: this.map,
      icon: './assets/map_marker.png'
    });
  }

}

上面是我的打字稿文件，它有三个功能

1. initializeGMap() //初始化谷歌地图
2. initOnMapClickListener() //初始化地图点击监听器 …

我们的项目使用了Angular 5和ngx-bootstrap. 当我使用tooltipof时ngx-bootstrap，发现tooltipalways在某些图层下，甚至它的z-index最高，这太奇怪了....有人知道如何解决这个问题吗？多谢。

在index.html下我已经定义了一个外部js文件，例如
<script data-siteid="XXXXXX" src="https://api.cartstack.com/js/customer-tracking/website.com_c7ee604471301b0bd028e8f19a535557.js" type="text/javascript"> </script>

我必须从组件调用名为cartstack_updatecart()的函数。（该函数是从上面的链接生成的）。怎么做？

我有5个不同的内容。我想将其拖动并重新排序在同一行中。我如何在角度 2、4、5 或 6 中执行此操作。如果有人知道，请帮助我执行此操作。

堆栈闪电战

我需要进行以下输入，以便它只接受数字：

<ion-input formControlName="quantity"></ion-input>

我知道这可以通过 type=number 来实现，但由于其他原因我只能使用类型文本。是否可以通过输入文本来做到这一点？另外我如何验证最小和最大金额？

我目前正在开发旧版 Angular 5 代码，除了使用 Angular CLI 生成组件时的默认测试之外，该代码没有任何单元测试。

该项目正在使用 Angular Material 5 RC0，单元测试似乎没有考虑我的模块的依赖关系。

应用程序模块.ts：

@NgModule({\n  declarations: [\n    AppComponent,\n    /* My module components... */\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    HttpModule,\n    ReactiveFormsModule,\n    BrowserAnimationsModule,\n    routing,\n    DialogsModule,\n    SharedModule ,\n    MaterialModule,\n    MatListModule, // It\'s the module that should be needed\n    MatSidenavModule,\n    ToastrModule.forRoot({\n      timeOut: 5000,\n      positionClass: \'toast-bottom-right\',\n      preventDuplicates: true\n    }),\n    HttpClientModule,\n    TableFactoryModule\n  ],\n  providers: [\n    /* My module services */,\n    AuthGuard\n  ],\n  bootstrap: [AppComponent]\n\n})\nexport class AppModule {\n\n}\n

应用程序组件.ts：

import { Component, Input, …

我正在使用这个xlsx js库从 Angular5 应用程序中的 TypeScript 对象列表生成 Excel 文件。

我不需要 TypeScript 对象的所有属性，我想以特定方式对其他属性进行排序。

以一个简单的 TypeScript 对象列表为例：

[
  { 
    "id":"one",
    "location":"New York",
    "metadata":"just other infos",
    "name":"John",
  },
  { 
    "id":"two",
    "location":"Boston",
    "metadata":"just other infos",
    "name":"Mark",
  },
  { 
    "id":"three",
    "location":"Portland",
    "metadata":"just other infos",
    "name":"Samy",
  }
]

想要Excel输出：

|id    |name |location |
|one   |John |New York |
|two   |Mark |Boston   |
|three |Samy |Portland |

到目前为止我所拥有的（排序没问题）：

const workbook = XLSX.utils.book_new();
const myHeader = ["id","name","location"];
const worksheet = XLSX.utils.json_to_sheet(this.myListOfObjects(), {header: myHeader});
XLSX.utils.book_append_sheet(workbook, worksheet, 'tab1');
XLSX.writeFile(workbook, …