Iam现在迷路了，需要一些帮助。
我有一个
并希望启用CSRF保护，因为默认情况下都应启用CSRF保护（文档说）：不是！
在SpringBoot上，我需要添加以下安全配置：
http
.csrf()
.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
在Angular上，我需要添加以下模块：
imports: [
...,
HttpClientModule,
HttpClientXsrfModule, //(!)
...
服务器的底线是在每个响应中发送XRSF-TOKEN。
-但每个人都有不同。那是对的吗？我希望在客户端会话中也一样。
-这里的主要问题是Angular5仍未在其帖子调用中使用XRSF-TOKEN（例如）。它没有在请求中设置X-XSRF-TOKEN。
我在做什么错还是想念？
这是我的模板:
<ng-template #template>
<input #newimg type="file" class="col-md-10" (change)="fileChange($event)"/>
</ng-template>
我不能得到引用#newimg时,其内部的ng-template(如果我改变它工作正常ng-template到div!)
@ViewChild('newimg') img: ElementRef; //doesnt work
我需要在上传图像后将其值设置为空,但始终未定义.
我的项目需要以下模块:
TranslateModule LocalizeRouterModule TransferHttpCacheModule
不知何故,这种模块组合正在创建循环依赖.
TranslateModule与TransferHttpCacheModule - 使用LocalizeRouterModule工作TranslateModule - 工作
但是当我导入所有三个时,它会导致依赖循环.
无法实例化循环依赖!ApplicationRef("[ERROR - >]"):在./AppBrowserModule@-1:-1中的NgModule AppBrowserModule中
检查plnkr以重现问题:https://plnkr.co/edit/qlUQ866JzTa3JtFgSAIO？p = preview
@NgModule({
imports: [
HttpClientModule,
BrowserModule,
BrowserAnimationsModule,
TransferHttpCacheModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpTranslationLoaderFactory,
deps: [HttpClient]
}
}),
LocalizeRouterModule.forRoot([], {
parser: {
provide: LocalizeParser,
useFactory: HttpLoaderFactory,
deps: [TranslateService, Location, LocalizeRouterSettings]
}
}),
RouterModule.forRoot([])
],
declarations: [
AppComponent
],
providers: [
],
bootstrap: [AppComponent]
}) export class AppModule { }
我正在尝试使用TransferState我的Angular Universal v5应用程序.经过大量的调试后,我意识到,在服务器上,TransferState似乎正在工作,因为响应包含一个<script id=APP_ID></script>包含相应序列化状态(TransferState源)的标记.
出于某种原因,浏览器应用程序尚未使用状态进行初始化.如果我将测试状态硬编码到我的应用程序index.html文件中(通过复制和粘贴),那么我的浏览器应用程序已成功初始化为浏览器状态.我不确定出了什么问题.任何想法非常感谢!
我唯一的猜测是,当我在Chrome的检查器中观看我的应用程序加载时,看起来好像大多数元素一次加载,然后在另一个时间点<script id=APP_ID></script>显示.这似乎暗示脚本标签是以某种方式在浏览器端生成/处理的,即使我已经检查了服务器的响应并且它包含脚本标记.但是,如果脚本标记在客户端进行某种处理,则可能TransferState在处理完成之前进行初始化,这就是我的应用程序未接收状态的原因.再次,任何想法都非常感谢!
这是相关代码:
app.module.tsimport { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { GraphQLModule } from './graphql.module';
@NgModule({
imports: [
BrowserModule.withServerTransition({ appId: 'service-work-coordination' }),
BrowserTransferStateModule,
AppRoutingModule,
GraphQLModule,
], …[ts]无法找到模块'@ angular/core'.
[ts]无法找到模块'@ angular/router'.
import {Component, ElementRef, Input,Output,EventEmitter,Inject, OnInit,ViewChild} from '@angular/core';
import {KendoGridComponent} from '../grid/grid.component'
import { Router} from '@angular/router';
{
"name": "SPORTS",
"version": "1.0.0",
"description": "SPORTS player - v0.2.37.1",
"engines": {
"node": "7.10.1"
},
"license": "ISC",
"dependencies": {
"@angular/animations": "^5.2.2",
"@angular/common": "^5.2.2",
"@angular/compiler": "^5.2.2",
"@angular/compiler-cli": "^5.2.2",
"@angular/core": "^5.2.2",
"@angular/forms": "^5.2.2",
"@angular/http": "^5.2.2",
"@angular/platform-browser": "^5.2.2",
"@angular/platform-browser-dynamic": "^5.2.2",
"@angular/platform-server": "^5.2.2",
"@angular/router": "^5.2.2",
"@angular/upgrade": "2.0.0",
"@ng-idle/core": "2.0.0-beta.2",
"@ng-idle/keepalive": "2.0.0-beta.2",
"@types/jquery": "^3.2.10", …项目描述:我的项目是通过package.json下载到node_module
的package.json
....
dependencies:{
....
"@myllc/application-core": "git+ssh://git@bitbucket.org/myllc/application-core.git",
"@myllc/application-shared":"git+ssh://git@bitbucket.org/myllc/application-shared.git",
}
....
在执行"npm build"时出错:
./node_modules/@myllc/application-core/index.ts中的错误.模块构建失败:错误:TypeScript编译中缺少/var/www/frontend-skeleton/node_modules/@myllc/application-core/index.ts.请通过'files'或'include'属性确保它在您的tsconfig中.丢失的文件似乎是第三方库的一部分.已发布库中的TS文件通常是包装严重的库的标志.请在库存储库中打开一个问题,提醒其作者并要求他们使用Angular Package Form(
https:// goo.gl/jB3GVv)打包库.
从Angular4升级到Angular5后出现:Tsconfig:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"lib": [
"es2016",
"dom"
],
"typeRoots": [
"node_modules/@types"
]
}
}
我试着补充一下
"include": [
"./node_modules/@myllc/**/*"
]
但在更深的文件夹.ts文件中出现相同的错误.还创建了 https://github.com/angular/angular-cli/issues/8284, 但没有解决这个错误.
解决办法是什么？
我正在尝试为daterangepicker添加功能,以允许根据所选的日期范围过滤项目列表.
我希望结合以下功能:
有一个显示"过滤"的按钮.没有输入.
用户可以单击该按钮,然后打开显示2个月的日历 - 当前和下一个.
然后,用户可以选择日期范围.
然后,所选日期范围将成为按钮的标签,向用户显示他或她选择的内容.
这个功能可以吗？当我尝试在按钮上添加日历时,它会完全中断.当我使用输入弹出日历时,它只允许我选择开始日期,然后关闭.
这就是我想要的:
<button #dp ngModel (click)="d.toggle()" (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t" ngbDatepicker #d="ngbDatepicker">
Click Me
</button>
<ng-template #t let-date="date" let-focused="focused">
<span class="custom-day"
[class.focused]="focused"
[class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}
</ng-template>
谢谢
我有两个组件： 项目列表和项目
我这样使用它们：
<items-list items="items"></items-list>
在内部级别的项目列表看起来像这样：
<ngx-carousel>
<ngx-item *ngFor="let item of items">
<item data="item"></item>
</ngx-item>
</ngx-carousel>
然而这种方法并不灵活，因为我应该使用一些“items”数组来填充项目。
我想做的是像这样重新设计方法：
<items-list>
<item data="dataForFirstItem"></item>
<item data="dataForSecondItem"></item>
</items-list>
但这里的问题是我不明白如何重新设计items-list的实现：
<ngx-carousel>
<ngx-item *ngFor="let item of items">
<!-- each item should be rendered here -->
</ngx-item>
</ngx-carousel>
ngx-item 需要将组件放置在里面。
我使用ContentChildren捕获 QueryList 中所有渲染的项目组件。但是如何渲染 ngx-item 中的每个项目呢？
我目前正在从事Angular 5项目。我在这里面临一个棘手的问题。
我想通过使用<code>标记在我的component.html文件中包含一些代码片段。但是，这样做似乎会在角度角度返回处理错误。因此，我尝试将代码放在* .component.ts文件中的变量中，并使用数据绑定显示如下代码：
<code_tag>{{my_code_snippet}}</code_tag>
但是现在的问题是代码总是以字符串形式出现，并且格式不正确（例如，如果是JSON代码）
我该如何解决？
在角度应用程序中，即使在加载主页之前，我也想从支持的数据中获取数据。但即使在我从后端获取数据之前，我也需要发送用户的国家/地区名称。
所以，现在数据调用取决于第一个解析器调用。这种情况该如何处理？
这是我的代码：
import { Routes} from '@angular/router';
import { HomeComponent } from '../pages/home/home.component';
import { ResolveService } from '../shared/service/resolve.service';
import { ResolveCountryService } from '../shared/service/resolve-country.service';
export const AppRoutes:Routes = [
{path:"", component: HomeComponent, resolve:{ country : ResolveCountryService, data:ResolveService} }
]
这里ResolveCountryService必须分享国家名称，ResolveService那么管理这个问题的正确方法是什么？
更新
如果我这样做：
export const AppRoutes:Routes = [
{path:"", component: HomeComponent, resolve:{ country : ResolveCountryService, resolve : {data:ResolveService } } }
]
我收到错误如下：
src/app/shared/service/resolve-country.service"' has no exported member 'ResolveCountryService'.