我尝试了以下设置。
根的路由:
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 之类的操作,空便笺路由不应该只匹配吗?子路由中的所有路由仅应在加载了子路由的父级时应用。
子路线上不可能有空路径吗?
我有一个有效的 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 应用程序的特定组件中执行此操作?
我目前在我的 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。
我们的团队正在应用程序中使用 Angular Material 的 MatSnackBar。因为每个人负责不同的页面,所以每个页面的snackBars 的持续时间是不同的。有些将持续时间设置为 2000 毫秒,有些设置为 1000 毫秒,有些甚至设置为 3000 毫秒。
我想从单个变量中获取持续时间值,以便我可以在一个地方控制所有小吃店的持续时间。甚至可以让开发人员在调用snackBar.open 函数时不发送持续时间值。
this.snackBar.open(message, {
duration: 2000,
});
Run Code Online (Sandbox Code Playgroud)
最好的方法是什么?
我在从 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
我有一个使用 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) 我有一个问题,双向绑定不能正常工作,我认为 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) 我从服务器端收到一个字节数组,并已成功将其转换为 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)
任何形式的帮助将不胜感激。谢谢你。
我现在正在关注本教程,我已经到了必须在我的 Angular5 组件中实例化我的 SockJS-Client 的地方。
这是我所做的:
我执行以下命令来安装所需的库:
npm install stompjs
npm install sockjs-client
npm install jquery
Run Code Online (Sandbox Code Playgroud)我将库导入到我的组件中,如下所示:
import { Stomp } from 'stompjs';
import { SockJS } from 'sockjs-client';
import $ from 'jquery';
Run Code Online (Sandbox Code Playgroud)最后我尝试实例化 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 不是构造函数 …
以下是我的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的任何属性?