标签: angular5

我已经从这个链接下载了一个主题.我必须在index.html文件中定义脚本和CSS.

index.html(正文部分)

<body>
  <app-root></app-root>
  <script type="text/javascript" src="./assets/js/main.85741bff.js"></script>
  <script type="text/javascript" src="./assets/js/common.js"></script>
</body>

我在common.js中定义了我的函数,并从main.85741bff.js文件中调用它.

common.js(function)

document.addEventListener("DOMContentLoaded", function (event) {
     masonryBuild();
     navbarToggleSidebar();
     navActivePage();
});

问题是我可以在页面重新加载时调用该函数,但在内容加载时无法调用该函数.

任何人都可以帮我解决这个问题吗？任何帮助,将不胜感激.

我现在面临一个问题.不确定如何使用过滤器运算符测试动作$.

我也试图遵循https://github.com/vsavkin/testing_ngrx_effects/tree/309b84883c2709a34ab98b696398332d33c2104f的规则

简单地说,我只是设置过滤器,如果数组的长度为0则返回true.

例如:

loadDatas$: Observable<Action> = this.actions$.ofType(LOAD_DATAS_ACTION).pipe(

withLatestFrom(this.store.select(getDatas), (action, datas) =>datas),

filter(data => !data.length),

switchMap(() => {

console.log(‘run api’);

return this.dataApi.find().pipe(

map((datas: Data[]) => new DatasLoadedAction(datas))

.........

... ..

所以我试着写两个测试用例,一个是

expect(effects.loadDatas$).toBeObservable(expected);

当过滤器返回true时.

但我不知道如何测试过滤器是否返回false.

你对此有什么建议吗？非常感谢

我有这个简单的html：

 <mat-card>
    <mat-card-content>
      <code>{{file}}</code>
    </mat-card-content>
 </mat-card>

由于某种原因，当呈现mat-card元素时，它没有被提出-我正在寻找这样的东西：

有谁知道我是否可能会缺少一些其他CSS？我不明白

我有一个同时显示3个虚拟移动设备的WebApp。

每个设备都包含一个mobile_container。我将自己mobile_container放在根组件中，如下所示：

<div>
  <app-mobile-container [fruit]="apple"></app-mobile-container>
  <app-mobile-container [fruit]="orange"></app-mobile-container>
  <app-mobile-container [fruit]="strawberry"></app-mobile-container>
</div>

我创建了一个服务toggleService来切换容器中不同的视图，这也很好用。看起来像这样：

import { Injectable } from '@angular/core';
@Injectable()
export class ToggleService {
    constructor() {
    }
    tabs: { name: string, visibility: boolean }[] = [
        { "name": "MainView", "visibility": true },
        { "name": "DetailView", "visibility": false },
    ];
    
    changeTab(index: number) {
        //changes View for example to "DetailView"
    }
    goToPrevTab() {
        //changes View for example back to "MainView"
    }
}

但是，如果我粘贴3 mobile_containers并单击例如DetailView …

我有角度5的问题.我使用了带有角度cli的全新安装:新的测试 - 路由,但它似乎重新加载整个页面不仅是部分.有人有同样的问题吗？

路由模块

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {GalleryComponent} from './gallery/gallery.component';
import {MainComponent} from './main/main.component';

const routes: Routes = [
    {
        path: '',
        component: MainComponent
    },
    {
        path: 'gallery',
        component: GalleryComponent
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: []
})
export class AppRoutingModule {
}

导航代码

<ul class="navbar-nav navbar-left">
  <li class="nav-item">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
   </li>
   <li class="nav-item">
       <a class="nav-link" href="/gallery">Galerie</a>
   </li>
</ul>

在angular5中构建项目,我想使用 [[]]作为开始和结束符号进行插值.

以前,Angularjs1.x具有$ interpolateProvider来自定义这些符号,默认情况下插值符号为{{}}.

我们如何在角度2+版本中实现相同的功能？

我创建了一个表,显示从数据库中获取的数据.获取数据的TS部分类似于:

this._appService.getVisitData().subscribe((data) => {
  this.checkinTemp = data;
  // Calling the DT trigger to manually render the table
  this.dtTrigger.next();
});

表生成了,我添加了编辑和删除功能,我的视图代码:

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">

  <thead>
  <tr>
    <th>ID</th>
    <th>Visitor Name</th>
    <th>Department</th>
    <th>Purpose</th>
    <th>Schedule Date Time</th>
    <th>Entry Source</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of checkinTemp">
    <td>{{data.id}}</td>
    <td>
      <a  (click)="viewCheckinData(data)"> {{data.f_name}} {{data.l_name}} </a>
      <span>
            <a  (click)="editCheckinData(data)">Edit</a>
        <a  (click)="confirmDelete(data)">Delete</a>
      </span>
    </td>
    <td>
      <span *ngIf="data.department == null || data.department == ''">N/A</span>
      <span *ngIf="data.department !== null ">{{data.department}}</span>
    </td>
    <td>
      <span *ngIf="data.purpose == null …

我已经创建了全局弹出组件，我想动态设置宽度和高度以及标题，怎么做？模式：

<app-m [(visible)]="show" title="Modal" data-popup="width:300;height:250">
<h1>Sample Title 1</h1>
<button (click)="show= !show" class="btn">Close</button>
</app-m>

我正在使用Ubuntu 18，并希望启动Angular 5项目，因此我通过以下命令安装了Node，npm，TypeScript，最后安装了最新的稳定Angular CLI，

sudo npm install -g @angular/cli

因此，默认情况下，它正在下载最新的稳定的Angular CLI，现在是6.1.3，默认情况下，它是Angular 6版本而不是Angular 5的版本，这是我的要求。

之后，我在同一页面上搜索了许多页面，以获取正确的CLI版本，以获得适用于Angular 5的最新版本5.2.11。

还看了很多帖子，但很多是从2017年Angular 5新发布的去年开始的。

所以我的问题是通过安装哪个较早版本的Angular CLI获取Angular 5最新版本？

我写这篇文章是因为我对Angular Material的Mat Toolbar和Mat-sidenav有疑问。我试图使Sidenav进入工具栏，并且工具栏始终占据顶部，如下所示：

例

这是我的代码：

<mat-sidenav-container class="sidenav-container" autosize>
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'side' : 'push'"
      [opened]="(isHandset$ | async)">
      <mat-toolbar class="fixed-header">
        <img class="logooTest" src="data:image/gif;base64,test"/>
      </mat-toolbar>
   		<mat-nav-list>
			  <mat-list-item>
				<a routerLink="/dashboard">Test</a>
        <mat-icon mat-list-icon>home</mat-icon>
        </mat-list-item>
        <mat-list-item>
          <a routerLink="/dashboard">Test</a>
          <mat-icon mat-list-icon>home</mat-icon>
          </mat-list-item>
          <mat-list-item>
          <a routerLink="/test">Test</a>
          <mat-icon mat-list-icon>tune</mat-icon>
          </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Test</a>
            <mat-icon mat-list-icon>settings</mat-icon>
            </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Test</a>
            <mat-icon mat-list-icon>layers</mat-icon>
            </mat-list-item>
            <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
              <span class="full-width" *ngIf="isExpanded || isShowing">Test dropdown</span>
              <mat-icon mat-list-icon>flash_on</mat-icon>
              <mat-icon …