错误 $ 未在 Angular Universal 中定义

Question

我在 Angular Universal 中遇到这个问题

ERROR ReferenceError: $ is not defined

有谁知道有什么方法可以解决它吗？

这是失败的代码部分

//some imports ...    
declare var $ : any; 

ngOnInit() {
     generateDirectory(){
            this.api.getCities('country_id='+3996063).subscribe(res => {
                $("#find").append("<ul class='findDir'>");
                for(let c in res){
                    $("#find>ul").append('<li><a href="/find/'+res[c].name.split(' ').join('_').toLowerCase()+'">'+res[c].name+'</a></li>');
                }
                $("#find").append("</ul>");
            });
        }
}

Answer 1

使用 Angular 时你不应该使用 jQuery，真的。Angular 拥有按照您想要的方式操作 HTML 的所有工具。这将是正确的 Angular 方式：

interface City {
    name: string;
}

class CitiesComponent implements OnInit {
    public cities$: Observable<City[]>;

    constructor(private readonly api: ApiClient) {}

    ngOnInit() {
        this.cities$ = this.api.getCities(`country_id=3996063`);
    }
}

interface City {
    name: string;
}

class CitiesComponent implements OnInit {
    public cities$: Observable<City[]>;

    constructor(private readonly api: ApiClient) {}

    ngOnInit() {
        this.cities$ = this.api.getCities(`country_id=3996063`);
    }
}

我希望我没有留下任何错误。但想法是您创建一个cities$类型为 的订阅City[]。

然后在模板代码中使用管道订阅它，然后使用指令async迭代城市列表*ngFor

为了做得更好，我再次建议从模板调用任何类型的函数，并尝试在订阅中尽可能多地执行操作，就是这样：

interface City {
    name: string;
}

class CitiesComponent implements OnInit {
    public cities$: Observable<City[]>;

    constructor(private readonly api: ApiClient) {}

    ngOnInit() {
        this.cities$ = this.api.getCities(`country_id=3996063`).pipe(
            map(cities => cities.map(city => ({
                    ...city,
                    url: city.name.split(' ').join('_').toLowerCase()
                }))
            )
        );
    }
}

<ul class="findDir" *ngIf="(cities$ | async) as cities">
    <li *ngFor="let city of cities">
        <a [attr.href]="'/find/' + city.name.split(' ').join('_').toLowerCase()">{{city.name}}</a>
    </li>
</ul>

如您所见，我确实使用映射管道运算符来添加url属性，Observable而不是在模板中执行此操作。这是更好的做法。