标签: angular5

Angular 5 子路由空路径覆盖根空路径?

我尝试了以下设置。

根的路由:

const routes: Routes = [
    {path: 'home', loadChildren: 'app/home/home.module#HomeModule'},
    {path: 'note', loadChildren: 'app/note/note.module#NoteModule'},
    ...
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: '**', redirectTo: 'home', pathMatch: 'full'}
];

export const Routing: ModuleWithProviders = RouterModule.forRoot(routes);
Run Code Online (Sandbox Code Playgroud)

一个孩子的路由:

const routes: Routes = [
    {path: '', component: NoteContainerComponent},
    ...
];

export const NoteRouting: ModuleWithProviders = RouterModule.forChild(routes);
Run Code Online (Sandbox Code Playgroud)

因此,如果我导航到 localhost:4200,我希望被重定向到 localhost:4200/home 但没有发生 url 重定向,但已加载注释路由。如果我执行诸如 localhost:4200/note 之类的操作,空便笺路由不应该只匹配吗?子路由中的所有路由仅应在加载了子路由的父级时应用。

子路线上不可能有空路径吗?

routing angular5

4
推荐指数
1
解决办法
1491
查看次数

将链接 amphtml 附加到 angular 应用程序的头部

我有一个有效的 angular 通用应用程序,我有一个特定页面的 amp 版本。为了使 amp 页面可访问,我必须添加到页面的<head>this 标签中

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
Run Code Online (Sandbox Code Playgroud)

所以我需要类似于MetaService 的东西。

我的问题是如何在 angular 5 应用程序的特定组件中执行此操作?

amp-html angular-universal angular angular5

4
推荐指数
1
解决办法
4164
查看次数

如何制作结构指令来包装我的 DOM 的一部分?

我目前在我的 HTML 中有以下行:

<p> this is my first line </p>
Run Code Online (Sandbox Code Playgroud)

使用包装器指令,我想添加第二个段落并将其包装在一个 div 中,因此它看起来像这样:

<p wrapper> this is my first line </p>
Run Code Online (Sandbox Code Playgroud)

然后指令将添加包装器和第二行,使最终的 HTML 看起来像这样:

<div>
    <p> this is my first line </p>
    <p> this is my second </p>
</div>
Run Code Online (Sandbox Code Playgroud)

根据我从angular.io 的理解,我需要创建一个结构指令并使用 TemplateRef 和 ViewContainerRef,但我找不到有关如何使用它们来包装 dom 的现有部分并添加第二行的示例.

我在这个项目中使用 Angular 5。

html dom angular-directive angular angular5

4
推荐指数
1
解决办法
1176
查看次数

角材料 MatSnackBar 默认持续时间

我们的团队正在应用程序中使用 Angular Material 的 MatSnackBar。因为每个人负责不同的页面,所以每个页面的snackBars 的持续时间是不同的。有些将持续时间设置为 2000 毫秒,有些设置为 1000 毫秒,有些甚至设置为 3000 毫秒。

我想从单个变量中获取持续时间值,以便我可以在一个地方控制所有小吃店的持续时间。甚至可以让开发人员在调用snackBar.open 函数时不发送持续时间值。

this.snackBar.open(message, {
  duration: 2000,
});
Run Code Online (Sandbox Code Playgroud)

最好的方法是什么?

material-design angular-material angular angular5

4
推荐指数
1
解决办法
6165
查看次数

Angular 5 从 http 请求中获取正确的 Observable 类型(为什么总是 Observable&lt;Object&gt;?)

我在从 http.get 请求中获取正确的可观察类型时遇到了一些麻烦。这是我遇到问题的功能:

getMovie(title:string, year:number): Observable<Movie> {
    const params = new HttpParams()
        .set('title', title)
        .set('year', year.toString());
    return this.http.get(this.moviePath, {params})
  }
Run Code Online (Sandbox Code Playgroud)

如您所见,我想Movie使用参数'title'和'year'. 问题是响应总是返回类型Observable<Object>而不是Observable<Movie>.

我知道我可以创建一个新的 Movie 实例,为其提供从列表中收到的属性。问题在于我的电影类具有可选的属性。这是我的电影课:

export class Movie {
  title:string;
  year?:number;
  imdb?:string;
  trailer?:string;
  reviewClip?:string;
  reviewSummary?:string;
  reviewScore:number;
  createdAt?:Date;
  bestWeek:boolean;
  bestMonth:boolean;
}
Run Code Online (Sandbox Code Playgroud)

有没有人知道一种简单的方法来使响应成为类型Observable<Movie>而不是Observable<Object>

observable angular angular-observable angular-httpclient angular5

4
推荐指数
1
解决办法
6535
查看次数

Angular 5:如何在 Jest 测试中导入 jQuery?

我有一个使用 CalendarService 的角度组件。当组件初始化时,我调用“calendarService.init()”方法。

这个 CalendarService 设置了一个语义 UI 日历的配置(基于 jQuery),代码类似于“$(myElement).calendar(settings);”。

当我用 Jest 测试我的组件时,组件的初始化有一个错误:“ReferenceError: $ is not defined”。

我该如何解决?

search.component.spec.ts :

describe('SearchComponent', () => {

  let fixture: ComponentFixture<SearchComponent>;
  let component: SearchComponent;
  let element: DebugElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        AppModule
      ],
      providers: [
        { provide: APP_BASE_HREF, useValue : '/search' },
        CalendarService
      ]
    });

    fixture = TestBed.createComponent(SearchComponent);

    let calendarService = TestBed.get(CalendarService);

    component = fixture.componentInstance;
    element = fixture.debugElement;

    fixture.detectChanges();
  }));
});
Run Code Online (Sandbox Code Playgroud)

search.component.ts :

@Component({
  selector: 'afo-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.less']
})
export class …
Run Code Online (Sandbox Code Playgroud)

jquery mocking jestjs angular angular5

4
推荐指数
2
解决办法
2183
查看次数

未从模型调用 Setter/getter

我有一个问题,双向绑定不能正常工作,我认为 getter 和 setter 方法是问题所在。

正如您在示例中看到的那样,我member.selectedConfig两次使用了 data 属性。我认为,当加载组件时,它们的值都应该是,"HelloWorld"但它们都不是。

当我开始手动更改文本框的值时,其他绑定的显示文本也会更改,但不会调用 set 函数。

member.name 的值始终正确显示。

当类中的 getter 和 setter 函数BasicSystemMember被删除时。绑定也很完美。但是我需要一个setter函数。

<li *ngFor="let member of activeSystemMembersList">
  <div class="">{{member.name}}</div>
  <div class="">{{member.selectedConfig}}</div>
  <input type="text" class="text-input" [(ngModel)]="member.selectedConfig" />
</li>
Run Code Online (Sandbox Code Playgroud)
export class BasicSystemMember implements SystemMember{
  name: string;
  private _selectedConfig: string;

  constructor(){
    this._selectedConfig = "HelloWorld"
  }

  set selectedConfig(newName) {
    this._selectedConfig = newName
  };

  get selectedConfig() {
    return this._selectedConfig
  };
 }
Run Code Online (Sandbox Code Playgroud)
export class SystemMembersComponent implements OnInit {
  activeSystemMembersList: SystemMember[];

  ngOnInit(){
    this.activeSystemMemberService.getActiveSystemMembers().subscribe(
      activeSystemMembersList => …
Run Code Online (Sandbox Code Playgroud)

angular angular5

4
推荐指数
1
解决办法
3455
查看次数

将字节数组转换为 blob(pdf 文件)并使用 angular 5 下载

我从服务器端收到一个字节数组,并已成功将其转换为 blob。但是,当我尝试下载它时,它显示文件已损坏。以下是我的代码 -

// In client side controller
this.contractsService.downloadPdf(id)
      .then((result) => {
        var blob = new Blob([result], { type: "application/pdf" });
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = "testing.pdf";
        link.click();
      });
Run Code Online (Sandbox Code Playgroud)

和,

// In client side service
private headers = new HttpHeaders({ 'Content-Type': 'application/json' });
downloadPdf(id: number) {
    return this.http.get(this.apiRoutes.download + "/" + id, { headers: this.headers })
      .map((res: any) => res)
      .toPromise();
  }
Run Code Online (Sandbox Code Playgroud)

任何形式的帮助将不胜感激。谢谢你。

asp.net-core angular5

4
推荐指数
1
解决办法
2万
查看次数

在 Angular5 中使用 SockJS 时出错 - “sockjs_client_1.SockJS 不是构造函数”

我现在正在关注本教程,我已经到了必须在我的 Angular5 组件中实例化我的 SockJS-Client 的地方。

这是我所做的:

  1. 我执行以下命令来安装所需的库:

    npm install stompjs
    npm install sockjs-client
    npm install jquery
    
    Run Code Online (Sandbox Code Playgroud)
  2. 我将库导入到我的组件中,如下所示:

    import { Stomp } from 'stompjs';
    import { SockJS } from 'sockjs-client';
    import $ from 'jquery';
    
    Run Code Online (Sandbox Code Playgroud)
  3. 最后我尝试实例化 SockJS:

    constructor(){
        this.initializeWebSocketConnection();
    }
    
    initializeWebSocketConnection(){
        let ws = new SockJS(this.serverUrl);  //<- This is the line causing the error
        this.stompClient = Stomp.over(ws);
        let that = this;
        this.stompClient.connect({}, function(frame) {
            that.stompClient.subscribe("/chat", (message) => {
                if(message.body) {
                    $(".chat").append("<div class='message'>"+message.body+"</div>")
                    console.log(message.body);
                }
            });
        });
    }
    
    Run Code Online (Sandbox Code Playgroud)

我得到的错误是:

错误错误:未捕获(承诺):类型错误:sockjs_client_1.SockJS 不是构造函数 …

websocket sockjs typescript angular angular5

4
推荐指数
1
解决办法
3612
查看次数

在Angular 5中通过Blob下载时设置文件名

以下是我的Typescript代码,可从API下载文件

DownloadLM() {
var ID= sessionStorage.getItem("UserID");
    return this.http.get(this.baseurl + 'api/DownloadFiles/DownloadLM/' + ID,
      {
        headers: {
          'Content-Type': 'application/json'
        },
        responseType: 'arraybuffer'
      }
    )
      .subscribe(respData => {
        this.downLoad(respData, this.type);
      }, error => {
      });
  }

  downLoad(data: any, type: string) {
    var blob = new Blob([data], { type: type.toString() });
    var url = window.URL.createObjectURL(blob);
    var pwa = window.open(url);
    if (!pwa || pwa.closed || typeof pwa.closed == 'undefined') {
      alert('Please disable your Pop-up blocker and try again.');
    }
  }
Run Code Online (Sandbox Code Playgroud)

下载Excel文件很好,但是它给我不需要的文件一个随机的名字,我要在下载时设置自己选择的文件名,

在哪里可以设置文件名?Blob的任何属性?

blob azure angular angular5

4
推荐指数
2
解决办法
2万
查看次数